jQuery 筆記：用 jQuery 快速選取元素

完整的文件可以參考官方網站。以下摘錄重點：

$("div").addClass("special");

$ 記號是 jQuery 的物件（其實是 jQuery 函數的縮寫），使用 $("div") 就是用 jQuery 來選取元素，這個範例可以選取文件內所有的 <div> 元素。後面接著的 .addClass("special") 就是用來做一些事情，這個範例是將先前所選取到的所有元素都加上一個名為 "special" 的 class。也就是透過 $("div").addClass("special") 的語法，可以一次幫文件上有的 <div> 元素都加入 special 的 class。

這和原本使用 JavaScript 來寫程式有很大的差異，原本自己寫可能會需要用到迴圈之類的語法，而 jQuery 的函數大多具有批次處理的功能！ $ 記號 $ 是使用 jQuery 過程中最重要的函數，可以用來用來找元素；使用方式只要把參數帶入即可。下面的範例，結果將會和上面的範例一模一樣：

jQuery("div").addClass("special");

如前述，$ 是 jQuery 函數的縮寫。

選取元素

前面的例子使用 $("div") 來選取元素，帶入的參數 div 表示要找的元素，這是 CSS 選擇器（CSS Selector）的語法，如同 CSS 在做排版和外觀所使用的選擇器語法一樣。jQuery 所支援的 CSS Selector 包含了 CSS 1、CSS2 以及仍未正式發佈的 CSS3，透過 plugin 還可支援常用的 XPath 語法。

這是一段原始的 HTML： <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 以下用一連串的範例，以展示基本的語法與文件中會被選取的元素。

$("#body")

• 選取到：<div id="body">
• 解釋：選取 id 為 body 的元素

---

$("div#body")

• 選取到：<div id="body">
• 解釋：選取 id 為 body 的 <div>

---

$("div.contents p")

• 選取到：<p>...</p><p>...</p>
• 解釋：選取 class 為 contents 的 <div> 元素所包住的所有下層的 <p>

---

$("div > div")

• 選取到：<div class="contents">
• 解釋：選取被 <div> 包住的下一層 <div>

---

$("div:has(div)")

• 選取到：<div id="body">
• 解釋：選取至少有包住一個 <div> 的 <div>

---