📖 第二章：jQuery Selector 選取目標元素
jQuery 操作分為兩個主要步驟：選取 (Select) 及執行 (Action)。
喺呢一章，我地會睇下有咩選取元素既方法。
基本選取方法
jQuery 所使用的方法，和 CSS Selector 的選取方法大同小異。
Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document.
以下係基本嘅選取例子：
$("a")揀頁面上所有<a>tag。$("li")揀頁面上所有<li>tag。$("input")揀頁面上所有<input>tag。$("#submit-button")揀選 ID 為 "submit-button" 的元素。$(".active")揀選 class 為 "active" 的元素。$("#movies > li")揀選 ID 為 "movies" 的元素下一層的<li>tag。$("#movies li")揀選 ID 為 "movies" 的元素內的所有<li>tag。
jQuery 官方文件可以找到所有的選取器列表。
http://api.jquery.com/category/selectors/
Cody Lindley 的 Selector 實驗
Cody Lindley 所製作的 jQuery 選取器實驗。可以嘗試唔同既選取器實際效果。揀選後會有 highlight 方便學習。
http://codylindley.com/jqueryselectors/
Traversing
所謂 jQuery 兩個步驟，其實選取中間隱藏一步，就再細致地選取目標。所以思考方式，實際為 jQuery 三部曲：
- 現有能選取的範圍（Select）。
- 再細致地找出目標（Traverse）。
- 執行動件（Action）。
點解 Select 都唔夠用，要再細致地進一步選取目標？因為好多時候，我們通過 Event 能夠獲取到的元素，並不是我們最終要操作的元素。
例如用戶按下按鈕、或對改變輸入框數值時，我們的目標是這個按鈕或輸入框的表格，又可能是按鈕的下一行文字，而不是按鈕本身。這個時候，就要對使用 Traversing function 再細致搵。
例如：
$("ul#movies").find("li.discount") 先找出 ID 為 "movies" 的 <ul> 列表，再找出其範圍內 class 為 "discount" 為列表項目。
$("ul#movies").find("li.discount").each(function_refernce) 找出目標範圍內 class 為 "discount" 為列表項目，然後對每個找到的元素，執行所傳入的 function 代碼。
$("ul#movies").find("li.active").next() 找出目標範圍內 class 為 "active" 為列表項目，然後找出其下一個元素。
$(this).parents("form") 從現在的元素向上尋找 <form> tag。這個用法通常用於按下按鈕或改變輸入框數值後，向上尋找整塊模組。例如 gmail 臨 Send 個 Mail 出去時，就會只道按咗 Send 按鈕，及表單要被發送，於是就將整個撰寫電郵的彈出框隱藏。
類似代碼：
$("#send-button").click(function(){
$(this).parents(".compose-email-view").hide();
});
以下 jQuery 官方文件有列出所有 Traversing function
Comments
no comments yet.