📖 第二章: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/

jQuery Selector Experienments

Traversing

所謂 jQuery 兩個步驟,其實選取中間隱藏一步,就再細致地選取目標。所以思考方式,實際為 jQuery 三部曲:

  1. 現有能選取的範圍(Select)。
  2. 再細致地找出目標(Traverse)。
  3. 執行動件(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 按鈕,及表單要被發送,於是就將整個撰寫電郵的彈出框隱藏。

Gmail compose mail

類似代碼:

$("#send-button").click(function(){
  $(this).parents(".compose-email-view").hide();
});

以下 jQuery 官方文件有列出所有 Traversing function

http://api.jquery.com/category/traversing/

Edit

Next Page → 第三章 事件處理 Events and Function handler

← Previous Page 第一章:初探 jQuery


Last updated at 2017-04-24. Show version history

Comments

no comments yet.

Please login to chat.