2008年8月24日 星期日

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: 以下用一連串的範例,以展示基本的語法與文件中會被選取的元素。

$("#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>

沒有留言: