jQuery基礎之二 -- 選擇器

在Dom編程中我們只能使用有限的函數根據id或者TagName獲取Dom對象. 在jQuery中則完全不同,jQuery提供了異常強大的選擇器用來幫助我們獲取頁面上的對象, 並且將對象以jQuery包裝集的形式返回.

性能優化： 相比於通過 ClassName 來選擇，應該優先考慮用 TagName 搭配 ClassName 來選擇，或是在頁面只有少量對象時用唯一性的 ID 來選擇，而且要儘量避免不必要的調用

1.基本選擇器：通過元素id、class和標籤名等來查找DOM元素

$("#id")    選取id爲“id”的元素
$(".class") 選取所有class爲“class”的元素
$("p")      選取所有的<p>元素
$("*")      選取頁面所有的元素
$("div, span, p.myClass")   選取所有的<div>,<span>和擁有class爲myClass的元素

2.層次選擇器： 通過DOM元素之間的層次關係來獲取特定元素

後代元素： $("ancestor descendant")  $("div span")選取所有<div>裏的所有的元素名是<span>後代元素
子元素：   $("parent > child")       $("div > span")選取所有<div>元素下元素名是<span>的子元素
相鄰元素： $("prev + next")          $(".one + div")選取class爲"one"的元素的下一個<div>元素 等價於$(".one").next("div")
兄弟元素： $("prev ~ siblings")      $("#two ~ div")選取id爲"two"的元素後面的所有<div>兄弟元素 等價於$("#two").nextAll("div")
                                     $("#prev").siblings("div")選取#prev所有的同輩/兄弟元素，無論前後位置 

3.過濾選擇器：通過特定的過濾規則來篩選出所需的DOM元素，過濾規則與CSS中的僞選擇器語法相同，以一個冒號（：）開頭

基本過濾： 
：first          $("div:first")選取所有<div>元素中第一個<div>元素
：last           $("div:last")選取所有<div>元素中最後一個<div>元素
：not(selector)  $("input:not(.myClass)")選取class不是myClass的<input>元素
:even            $("input:even")選取索引是偶數的<input>元素，索引從0開始
:odd             $("input:odd")選取索引是奇數的<input>元素，索引從0開始
:eq(index)       $("input:eq(1)")選取索引等於1的<input>元素
:gt(index)       $("input:gt(1)")選取索引大於1（不包括1）的<input>元素
:lt(index)       $("input:lt(1)")選取索引小於1（不包括1）的<input>元素
:header          $(":header")選取網頁中所有的<h1>,<h2>,<h3>...
:animated        $("div:animated")選取正在執行動畫的<div>元素

內容過濾： 
:contains(text)  $("div:contains('我')")選取含有文本‘我’的<div>元素
:empty           $("div:empty")選取不包含子元素（包括文本元素）的<div>空元素
:has(selector)   $("div:has(p)")選取含有<p>元素的<div>元素
:parent          $("div:parent")選取擁有子元素（包括文本元素）的<div>元素

可見性過濾： 
：hidden         $(":hidden")選取所有不可見的元素，包括<input type="hidden"/>, <div style="display:none;"/>和<div style="visibility:hidden;"/>等元素
                 $("input:hidden")選取所有不可見的<input>元素
：visible        $("div：visible")選取所有可見的<div>元素

屬性過濾： 
[attribute]         $("div[id]")選取擁有屬性id的<div>元素
[attribute=value]   $("div[title=test]")選取屬性title等於"test"的<div>元素
[attribute!=value]  $("div[title=test]")選取屬性titlei不等於"test"（包括沒有title屬性的元素）的<div>元素
[attribute^=value]  $("div[title^=test]")選取屬性title以"test"開頭的<div>元素
[attribute$=value]  $("div[title$=test]")選取屬性title以"test"結尾的<div>元素
[attribute*=value]  $("div[title*=test]")選取屬性title包含"test"的<div>元素
[selector1][selector2]...  $("div[id][title$=test]")選取擁有屬性id,並且屬性title以"test"結尾的<div>元素

子元素過濾： 
:nth-child(index/enen/odd/equation)選取每個父元素下的第index個子元素或者奇偶元素（index從1開始算），：eq(index)是從0開始算的，且只匹配一個元素
   :nth-child(enen)選取每個父元素下的索引值是偶數的元素
   :nth-child(odd)選取每個父元素下的索引值是奇數的元素
   :nth-child(2)選取每個父元素下的索引值等於2的元素
   :nth-child(3n)選取每個父元素下的索引值是3的倍數的元素（n從0開始）
   :nth-child(3n+1)選取每個父元素下的索引值是（3n+1） 的元素（n從0開始）
:first-child      $("ul li:first-child")選取每個<ul>中第1個<li>元素
:last-child       $("ul li:last-child")選取每個<ul>中最後1個<li>元素
:only-child       $("ul li:only-child")在<ul>中選取是惟一子元素的<li>元素

表單對象屬性過濾： 
:enabled          $("#form1:enabled")選取id爲"form1"的表單內的所有可用元素
:disabled         $("#form2:disabled")選取id爲"form2"的表單內的所有不可用元素
:checked          $("input:checked")選取所有被選中的<input>元素
:selected         $("select :selected")選取所有被選中的選項元素

4.表單選擇器：

:input      $(":input")選取所有<input>、<textarea>、<select>、<button>元素
:text       $(":text")選取所有的單行文本框
:password   $(":password")選取所有的密碼框
:radio      $(":radio")選取所有的單選框
:checkbox   $(":checkbox")選取所有的複選框
:button     $(":button")選取所有的按鈕
:submit     $(":submit")選取所有的提交按鈕
:reset      $(":reset")選取所有的重置按鈕
:image      $(":image")選取所有的圖像按鈕
:file       $(":file")選取所有的上傳域
:hidden     $(":hidden")選取所有不可見的元素

jQuery選擇器注意：

    1.選擇器中含有 “.”, "#", "(", "]"等特殊字符要進行轉義，如$('#id\\#b'); 選取id爲id#b的元素

    2.選擇器中含有空格問題

         var a=$('.test :hidden'); 帶空格的是後代選擇器，選取class爲‘test’的元素裏面的隱藏元素

         var b=$('.test:hidden');  不帶空格的是過濾選擇器，選取隱藏的class爲‘test’的元素