Brian的雜記
  • Introduction
  • Brian's 雜記
    • My Awesome API
    • FB 大頭貼
    • 硬體雜記
    • PHP
    • project
      • 模擬器
      • WAMP
    • WinMerge
    • 雜記
      • LINQ
      • 方法
      • Grid View
      • namespace
      • global
      • 物件導向
      • Excel
      • VS2017
      • single sign on
      • Master
      • Https
      • 憑證
      • 略過憑證不符
      • NLog
      • 團隊開發
      • .NET Core
      • 共用網路上的芳鄰
      • 爬蟲
      • NPOI
      • RSS
      • 多執行緒
      • 記憶體回收
      • 密碼學
        • BCrypt
        • AES
      • 主機環境建置
      • Session
      • Error
      • IIS 相關
      • 無障礙相關
      • 介面
        • 影像地圖
      • telnet
        • smtp
      • nslookup
      • 協助客戶解決問題
      • 驗證欄位
      • 網站管理
      • 工具整理
    • 正規表示法
    • 影像處理
    • IntelliJ Idea
    • 觀念
      • Clean Code
        • 命名
        • 函式
        • 註解
        • 編排
        • 物件及資料結構
        • 錯誤處理
        • 邊界
        • 單元測試
        • 類別
      • Java 程式風格
      • Design Pattern
        • 單例模式
      • 同步
      • 畫圖
        • ER-Model
        • 類別圖
        • Use Case
        • 有限狀態機
      • 資料 API 文件 分析
      • CORS & SSL
      • 利用DISC幫助溝通
      • OAS
    • 檔案上傳
      • FileStore
      • App Engine
      • Google Storage
    • OAuth vs Open ID
    • MIME
    • 虛擬桌面
    • 待看資料
    • Selenium
    • CDN
    • HTTP
    • 編碼
    • 2nd-ML100Days
      • jupyter
    • 微服務
      • 設計
        • 1 ~ 5
        • 6
        • 7
        • 8
        • 9
    • Gradle
    • Maven
    • Error
    • 批次檔 BAT
    • Kurento
    • WebSocket & WebRTC
  • 需求面能力
    • User Story
  • Google Cloud Platform
    • Compute Engine
  • Python
    • 基本語法
    • Pandas
    • 套件
    • Matplotlib
    • Encoder
    • jupyter
  • Java
    • Java
      • File
      • Exception
      • 物件導向觀念
      • 加密
      • HTTP
      • 集合
      • Stream()
      • Web
      • ResultSet
      • JDK6
      • JDK8
    • 讀取、複寫MP3 Tag
    • Log4j2
    • Servlet
      • 容器
    • JSP
    • JBOSS
    • JWT
    • PreparedStatement
    • Error
    • Spring
      • Spring Boot
        • @Value
        • Build
      • RequestParameter
      • Error
      • Autowired
      • JPA
      • FeignClient
      • WebSocket
      • thymeleaf
      • Security
      • Test
      • Scheduled
      • Redirect
    • IntelliJ
  • Linux
    • Linux
    • Shell Script
    • Cygwin(在Windows執行Linux指令)
  • 前端
    • HTML
      • Link
    • CSS
      • Position
      • padding color
      • display
    • JS
      • jQuery
        • Select2
      • fancybox
      • ES6
      • 效能
      • GoogleMap API
        • Marker
        • InfoWindow
      • 事件
      • CKEditor
      • TGOS
      • JSON
      • QRcode
      • 核心概念
        • 物件 變數 型別
          • number
          • String
          • boolean
          • null & undefined
          • Symbol
        • JS 物件概念
        • 深入理解JS 函式物件
        • 更多ES2015/ES6 全新語言特性
      • Promise
    • 效果應用
  • 資料庫
    • 注意事項
    • MariaDB
    • MySQL
      • inner join 和 join
      • 字串比對
      • 倒數資料
    • SQL
      • DDL 資料定義語言
      • DML 資料操縱語言
      • DCL 資料控制語言
      • TCL 交易控制語言
      • T-SQL
      • CTE
      • JOIN
    • Oracle
    • MSSQL 操作
      • 新增使用者
      • SQL 指令
      • Sequence
    • 差異比較
    • MyBatis
    • Workbench 操作
    • SQL Injection
  • 版本控制
    • Gitlab
      • sign up
      • sign in
      • add project
      • add members
    • SourceGit
      • install
    • SmartGit
      • install
      • operate
      • git 操作雜記
    • TortoiseGit
    • Git
    • TFS
    • SVN
  • Test
    • 軟體測試原則
    • 演算法
    • XMind
      • install
    • Jenkins
      • 建置
    • HTTPie
    • Postman
    • 測試驅動開發
    • 撰寫測試的觀念
    • 測試框架
    • IoC & DI
    • 隔絕相依性的方式
    • JUnit
    • NUnit
    • 習慣
    • 虛設常式
  • Angular
    • hello world
    • ng-options
    • ES6
    • Build & Conponect
    • HttpClient
    • 部署
  • ASP.NET Web Form
    • Chapter 2
      • 2-1
        • 小東西
    • 略過請求驗證
  • Go
Powered by GitBook
On this page
  • jQuery
  • arr.slice(int start, int end)
  • .empty
  • .append(string str)
  • .removeClass(string str)
  • .addClass(string str)
  • .change()
  • .proxy()
  • .filter()
  • .children()
  • .each(function(index, element){})
  • .map .grep 的介紹
  • 字串轉物件
  • .mouseover()
  • .attr() & .prop() 的比較
  • .css
  • $.ajax

Was this helpful?

  1. 前端
  2. JS

jQuery

PreviousJSNextSelect2

Last updated 5 years ago

Was this helpful?

jQuery

參考資料:() 參考資料:()

有三種搜尋方式

$("ul li")
$("#ElementID")
$(".ElementClass")

直接打 =>TAG 前面加 "#" 搜尋ID 前面加 "." 搜尋Class

已經搜尋到某個節點,例如: $("#ElementID") 已經搜尋到某個<div>,裡面還有一串

<ul>
<li class="Data">...</li>
<li class="Data">...</li>
<li class="Data">...</li>
</ul>

這時候想要搜尋 <li> 的Element,則可以利用下面兩種方法

$("#ElementID li.Data"); //第一種
$("#ElementID").find("li.Data"); //第二種

他們會搜尋出一樣的結果。 我個人的想法,第一種就是直接找到,上面的三種類型一次用到。 第二種是,如果你的 $("#ElementID") 會重複用到,那就是先宣告一次,後面就直接把結果拿來用,就不用重複搜尋整個頁面。

arr.slice(int start, int end)

將某個arr限縮,從start的index,開始留著,以前的去掉。end以後的index(包含),也都去掉。

end 可以不加。這樣就會變成,start之後的都留。

.empty

清空

.append(string str)

.removeClass(string str)

str 為 要移除的 Class 名稱。

.addClass(string str)

str 為 要增加的 Class 名稱。

.change()

當輸入框發生變化時,觸發事件。

$("input").change(()=>{
    $(this).css("background-color","#FFFFCC");
});

.proxy()

.filter()

.children()

<div class="class1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
$('.class1').children('div');

可以取得1~4的集合,可以利用first()、last()或是其他條件,去取得想要的物件。

.each(function(index, element){})

.map .grep 的介紹

字串轉物件

.mouseover()

.mouseover(function(){
    ///
})

.attr() & .prop() 的比較

attr('abc') //取 abc 這個屬性的值

attr('abc','123') //設 abc 這個屬性的值為 123

.css

要注意有些屬性是CSS的樣式獨有的,這時候就是用 .css() 去添加

EX:

.css("display","none")

$.ajax

$.ajax({name:value,name:value, ...});

ajax 方法用於執行異步HTTP請求

$.ajax({url:'', success:function(result){

}});

data 要送過去的數據 success 成功時調用 error 失敗時調用 type GET or POST url 網址

username 帳戶 password 密碼

async 默認 true cache 默認 true complete 完成之後執行,也就是success 和 error 結束後都會執行 contentType 默認 "application/x-www-form-urlencoded" timeout millsec

增加str 到 selector 的範圍內。 參考資料:()

參考資料:()

??????? 參考資料:() 參考資料:()

參考資料:() 參考資料:()

參考資料:()

參考資料:介紹jQuery map()與grep()()

var str = ""; console.log($(str).attr('title')); //123

參考資料:()

參考資料:()

http://api.jquery.com/
https://www.w3schools.com/js/
https://www.w3schools.com/jquery/html_append.asp
https://www.w3schools.com/jsref/event_onchange.asp
https://api.jquery.com/jQuery.proxy/
https://read01.com/nmnoGM.html#.Wuu_EIiFMdU
http://www.w3school.com.cn/jquery/traversing_filter.asp
http://api.jquery.com/filter/
http://www.w3school.com.cn/jquery/traversing_each.asp
http://blog.darkthread.net/post-2015-06-22-jquery-map-and-grep.aspx
test
https://cythilya.github.io/2017/09/10/jquery-attr-vs-prop/
http://www.runoob.com/jquery/ajax-ajax.html