第二章：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 三部曲：

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 按鈕，及表單要被發送，於是就將整個撰寫電郵的彈出框隱藏。

類似代碼：

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

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

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

第二章：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 三部曲：

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 按鈕，及表單要被發送，於是就將整個撰寫電郵的彈出框隱藏。

類似代碼：

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

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

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

第二章：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 三部曲：

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 按鈕，及表單要被發送，於是就將整個撰寫電郵的彈出框隱藏。

類似代碼：

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

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

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

...

...

咩係 jQuery？

jQuery 係 JavaScript 入面做負責控制同修改 HTML DOM 結構的工具箱 (Library)。

簡單黎講，我地平時用 jQuery 會進行兩個主要步驟：搜尋目標元素，進行改動。

例如：

$("#status").hide();

就係找出 id 為 status 的目標，然後使用 hide 指令進行隱藏。

咩係 jQuery？

jQuery 係 JavaScript 入面做負責控制同修改 HTML DOM 結構的工具箱 (Library)。

簡單黎講，我地平時用 jQuery 會進行兩個主要步驟：搜尋目標元素，進行改動。

例如：

$("#status").hide();

就係找出 id 為 status 的目標，然後使用 hide 指令進行隱藏。

咩係 jQuery？

jQuery 係 JavaScript 入面做