強大的Jquery對象選擇器

(1) 基本選擇器：經過元素id,class和標籤名等來查找Dom元素

     　　1)$("#id") 根據給定的ID匹配一個元素，返回單個元素  $("#name")選取Id爲test的元素

    　　 2)$(".class") 根據給定的類名匹配元素 返回集合元素  $(".class")選取全部class爲class的元素

     　　3)$("element") 根據給定的元素名匹配元素，返回集合元素  $("input")選取全部的input元素

     　　4)$("*") 匹配全部的元素，返回集合元素，$("*")選取全部的元素

     　　5)$("selector1,selector2,...,selectorN") 將每個選擇器匹配到的元素合併後返回集合元素， $("div,span,p.myClass")選取全部<div>,<span>和擁有class爲myClass的<p>標籤的一組元素

　　(2)層次選擇器：若是想經過Dom元素之間的層次關係來獲取特定元素，例如後代元素，子元素，相鄰元素和同輩元素

     　　1)$("ancestor descendant") 得到ancestor元素裏面的全部descendant(後代)元素，$("div span")選取<div>裏的全部的<span>元素

     　　2)$("parent>child") 選取parent元素下的child(子)元素，返回集合元素 $("div span")選取<div>元素下元素名爲<span>的子元素

           　　 註解：和$("ancestor descendant")有區別，$("ancestor descendant")選擇的是後代元素

    　　 3)$("prev+next") 選取緊接在prev元素後的next元素，返回集合元素，$(".one+div")選取class爲one的下一個<div>同輩元素

     　　4)$("prev~siblings") 選取prev元素以後的全部siblings元素，$("#two~div")選取Id爲two的元素後面的全部<div>同輩元素

            　　註解:可使用next()方法來替代$('prev+next')選擇器  $(".one").next("div");可使用nextAll()方法來替代$("prev~siblings")選擇器 $("#two").nextAll(div)

　　(3)過濾選擇器：主要經過特定的過濾規則來篩選出所須要的Dom元素，按照不一樣的過濾規則，過濾選擇器能夠分爲基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾和表單對象屬性過濾選擇器

     　　1)基本過濾選擇器

           　　 1)$(":first") 選取第一個元素，$("div:first")選取全部<div>元素中第一個<div>元素。

          　　  2)$(":last")選取最後一個元素，$("div:last")選取全部<div>元素中最後一個<div>元素。

           　　3)$(":not(selector)")去除全部與給定選擇器匹配的元素，$("input:not(.myClass)")選取class不是myClass的<input>元素。

           　　 4)$(":even")選取索引是偶數的全部元素，索引從0開始，$("input:even")選取索引是偶數的<input>元素

          　　  5)$(":odd")選取索引是奇數的全部元素，索引從0開始，$("input:odd")選取索引是奇數的<input>元素

          　　  6)$(":eq(index)")選取索引等於index的元素，(index從0開始)，$("input:eq(1)")選取索引等於1的<input>元素

            　　7)$(":gt(index)")選取索引大於index的元素，(index從0開始)，$("input:gt(1)")選取索引大於1的<input>元素(大於1，而不包括1)

           　　 8)$(":lt(index)")選取索引小於index的元素，(index從0開始)，$("input:lt(1)")選取索引小於1的<input>元素(小於1，而不包括1)

          　　  9)$(":header")選取全部的標題元素，例如：h1,h2,h3等等，$(":header")選取網頁中的全部的<h1>,<h2>,<h3>...

           　　 10)$(":animated")選取當前正在執行動畫的全部元素，$("div:animated")選取正在執行動畫的<div>元素。

           　　 11)$(":focus")選取當前獲取焦點的元素，$(":focus")選取當前獲取焦點的元素

     　　2)內容過濾選擇器：主要體如今它所包含的子元素或者文本內容上面

         　　   1)$(":contains(text)")選取含有文本爲"text"的元素，$("div:contains('我')")選取含有文本"我"的<div>元素

          　　  2)$(":empty")選取不包含子元素或者文本的空元素，$("div:empty")選取不包含子元素(包括文本元素)的<div>空元素

          　　  3)$(":has(selector)")選取含有選擇器所匹配的元素的元素，$("div:has(p)")選取含有<p>元素的<div>元素

           　　 4)$(":parent")選取含有子元素或者文本的元素,$("div:parent")選取擁有子元素(包括文本元素)的<div>元素

    　　 3)可見性過濾選擇器：根據元素的可見和不可見狀態來選擇相應的元素

           　　 1)$(":hidden")選取全部不可見的元素，$(":hidden")選取全部不可見的元素，包括<input type="hidden" />，

           　　 <div style="display:none;">和<div style="visibility:hidden;">等元素。若是隻想選取<input>元素，可使用$("input:hidden")

           　　 2)$(":visible")選取全部可見的元素，$("div:visible")選取全部可見的<div>元素

     　　4)屬性過濾選擇器：經過元素的屬性來獲取相應的元素

           　　 1)$("[attribute]")選取擁有此屬性的元素，$("div[id]")選取擁有屬性Id的<idv>元素。

           　　 2)$("[attribute=value]")選取屬性的值爲value的元素，$("div[title=test]")選取屬性title爲"test"的<div>元素

           　　 3)$("[attribute!=value]")選取屬性的值不等於value的元素，$("div[title!=test]")選取屬性title不等於"test"的<div>元素(注意：沒有屬性title的<div>元素也會被選取)

            　　4)$("[attribute^=value]")選取屬性的直以value開始的元素，$("div[title^=test]")選取屬性title以"test"開始的<div>元素

            　　5)$("[attribute$=value]")選取屬性的值以value結束的元素，$("div[title$=test]")選取屬性title以"test"結束的<div>元素

          　　  6)$("[attribute*=value]")選取屬性的值含有value的元素，$("div[title*=test]")選取屬性title含有"test"的<div>元素

          　　  7)$("[attribute|=value]")選取屬性等於給定字符串或以給字符串爲前綴(該字符串後跟一個連字符"-")的元素,$("div[title|="en"]")選取屬性title等於en或者以en爲前綴(給字符串後跟一個"-")的元素

           　　 8)$("[attribute~=value]")選取屬性用空格分隔的值中包含一個給定值得元素，$("div[title~='uk']")選取屬性title用空格分隔的值中包含字符uk的元素

            　　9)$("[attribute1][attribute2][attribute3]")用屬性選擇器合併成一個複合屬性選擇器，知足多個條件，每選擇一次，縮小一次範圍

                   　　$("div[id][title$='test']")選取擁有屬性id，而且屬性title以"test"結束的<div>元素

     　　5)子元素過濾選擇器

           　　 註解：子元素過濾選擇器的過濾規則相對於其餘的選擇器稍微有些複雜，只要將元素的父元素和子元素區分清楚，使用起來仍是至關簡單的

         　　   1)$(":nth-child(idenx/even/odd/equation)")選取每一個父元素下的第index個子元素或者奇偶元素(idnex從1算起)

                  　　 :eq(index)只匹配一個元素，而:nth-child將爲每個父元素匹配子元素，而且:nth-child(index)的index是從1開始的，

                 　　  而:eq(index)是從0開始的

          　　  2)$(":first-child")選取每一個父元素的第一個子元素，:first只返回單個元素，而:first-child選擇符將爲每一個父元素匹配第一個

                　　   子元素，例如:$("ul li:first-child");選取每一個<ul>中的一個<li>元素

           　　 3)$(":last-child")選取每一個父元素的最後一個子元素,和上面同樣，:last只返回當個元素，而:last-child選擇符將爲每一個符永

                   元素匹配最後一個子元素，例如：$("ul li:first-child");選取每一個<ul>中的最後一個<li>元素。

           　　 4)$(":only-child")若是某個元素是它父元素中惟一的子元素，那麼將會被匹配，若是父元素中含有其餘元素，這不會被匹配

                　　   $("ul li:only-child")在<ul>中選取是惟一子元素的<li>元素

          　　  5):nth-child()選擇器是很經常使用的子元素過濾器，詳細功能以下：

                 　　  1)$(:nth-child(even))能選取每一個父元素下的索引值是偶數的元素

                   　　2)$(:nth-child(odd))能選取到每一個父元素下的索引值是奇數的元素

                  　　 3)$(:nth-child(2))能選取到每一個父元素下索引值等於2的元素

                 　　  4)$(:nth-child(3n))能選取到每一個父元素下索引值是3的倍數的元素(n從1開始)

                  　　 5)$(:nth-child(3n+1))能選取每一個父元素下索引值是(3n+1)的元素(n從1開始)

    　　 6)表單對象過濾選擇器：對所選擇的表單進行過濾

          　　  1)$(:enabled)選取全部可用元素，$("#form :enabled");選取id爲"form"的表單內的全部可用元素

            　　2)$(:disabled)選取全部不可用的元素，$("#form :enabled");選取id爲"form"的表單內的全部不可用元素

            　　3)$(:checked)選取全部被選中的元素(單選框，複選框)，$("input:checked")選取全部被選中的<input>元素

           　　4)$(:selected)選取全部被選中的選項元素(下拉列表)，$("select option:selected")選取全部被選中的選項元素

　　(4)表單選擇器：方便的獲取到表單的某個或者某類型的元素

     　　1)$(":input")選取全部的<input>,<textarea>,<select>,<button>元素

     　　2)$(":text")選取全部的單行文本框

     　　3)$(":password")選取全部的密碼框

    　　 4)$(":radio")選取全部的單選框

    　　 5)$(":checkbox")選取全部的多選框

    　　 6)$(":submit")選取全部的提交按鈕

     　　7)$(":image")選取全部的圖像按鈕

     　　8)$(":reset")選取全部的重置按鈕

     　　9)$(":button")選取全部的按鈕

     　　10)$(":file")選取全部的上傳域

     　　11)$(":hidden")選取全部的不可見元素

選擇器中的一些注意事項：

　　(1) 選擇器中含有特殊符號的注意事項

    　　 1)選擇器中含有".","、","#","(","]"等特殊字符

           　　 根據w3c的規定，屬性中是不能含有這些特殊字符的，但在實際項目中偶爾會遇到表達式中含有"#","."等特殊字符，若是按照普通的方式去處理的話可能會出現錯誤，解決此類錯誤是使用轉義符轉義

                   例如：<div id="id#b">韓迎龍</div><div id="id[1]">韓迎龍</div>,這時的取法是這樣的 $("#id\\#b"),$("#id\\[1\\]")                        

    　　 2)屬性選擇器的@符號問題

           　　 在Jquery升級版本的過程當中，jquery在1.3.1版本中完全放棄了1.1.0版本遺留下來的@符號，加入你使用的是1.3.1以上的版本，

            　　那麼你不須要再屬性前添加@符號，例如：

          　　  $("div[@title='test']")，正確的寫法就是去掉@符號，$(div[title='test'])

　　(2)選擇器中含有空格的注意事項

     　　選擇器中的空格是不容忽視的，多一個空格或者少一個空格也許會獲得大相徑庭的結果

試驗過的選擇器：

$("#myELement")    選擇id值等於myElement的元素，id值不能重複在文檔中只能有一個id值是myElement因此獲得的是惟一的元素

$("div")           選擇全部的div標籤元素，返回div元素數組

$(".myClass")      選擇使用myClass類的css的全部元素

$("*")             選擇文檔中的全部的元素，能夠運用多種的選擇方式進行聯合選擇：例如$("#myELement,div,.myclass")

層疊選擇器：

$("form input")         選擇全部的form元素中的input元素

$("#main > *")          選擇id值爲main的全部的子元素

$("label + input")     選擇全部的label元素的下一個input元素節點，經測試選擇器返回的是label標籤後面直接跟一個input標籤的全部input標籤元素

$("#prev ~ div")       同胞選擇器，該選擇器返回的爲id爲prev的標籤元素的全部的屬於同一個父元素的div標籤

基本過濾選擇器：

$("tr:first")               選擇全部tr元素的第一個

$("tr:last")                選擇全部tr元素的最後一個

$("input:not(:checked) + span")  

過濾掉：checked的選擇器的全部的input元素

$("tr:even")               選擇全部的tr元素的第0，2，4... ...個元素（注意：由於所選擇的多個元素時爲數組，因此序號是從0開始）

$("tr:odd")                選擇全部的tr元素的第1，3，5... ...個元素

$("td:eq(2)")             選擇全部的td元素中序號爲2的那個td元素

$("td:gt(4)")             選擇td元素中序號大於4的全部td元素

$("td:ll(4)")              選擇td元素中序號小於4的全部的td元素

$(":header")

$("div:animated")

內容過濾選擇器：

$("div:contains('John')") 選擇全部div中含有John文本的元素

$("td:empty")           選擇全部的爲空（也不包括文本節點）的td元素的數組

$("div:has(p)")        選擇全部含有p標籤的div元素

$("td:parent")          選擇全部的以td爲父節點的元素數組

可視化過濾選擇器：

$("div:hidden")        選擇全部的被hidden的div元素

$("div:visible")        選擇全部的可視化的div元素

屬性過濾選擇器：

$("div[id]")              選擇全部含有id屬性的div元素

$("input[name='newsletter']")    選擇全部的name屬性等於'newsletter'的input元素

$("input[name!='newsletter']") 選擇全部的name屬性不等於'newsletter'的input元素

$("input[name^='news']")         選擇全部的name屬性以'news'開頭的input元素

$("input[name$='news']")         選擇全部的name屬性以'news'結尾的input元素

$("input[name*='man']")          選擇全部的name屬性包含'news'的input元素

$("input[id][name$='man']")    可使用多個屬性進行聯合選擇，該選擇器是獲得全部的含有id屬性而且那麼屬性以man結尾的元素

子元素過濾選擇器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child")          返回全部的div元素的第一個子節點的數組

$("div span:last-child")           返回全部的div元素的最後一個節點的數組

$("div button:only-child")       返回全部的div中只有惟一一個子節點的全部子節點的數組

表單元素選擇器：

$(":input")                  選擇全部的表單輸入元素，包括input, textarea, select 和 button

$(":text")                     選擇全部的text input元素

$(":password")           選擇全部的password input元素

$(":radio")                   選擇全部的radio input元素

$(":checkbox")            選擇全部的checkbox input元素

$(":submit")               選擇全部的submit input元素

$(":image")                 選擇全部的image input元素

$(":reset")                   選擇全部的reset input元素

$(":button")                選擇全部的button input元素

$(":file")                     選擇全部的file input元素

$(":hidden")               選擇全部類型爲hidden的input元素或表單的隱藏域

表單元素過濾選擇器：

$(":enabled")             選擇全部的可操做的表單元素

$(":disabled")            選擇全部的不可操做的表單元素

$(":checked")            選擇全部的被checked的表單元素

$("select option:selected") 選擇全部的select 的子元素中被selected的元素

$(」input[@ name =S_03_22]「).parent().prev().text() 選取一個 name 爲」S_03_22″的input text框的上一個td的text值

$(」input[@ name ^='S_']「).not(」[@ name $='_R']「) 名字以」S_」開始，而且不是以」_R」結尾的

$(」input[@ name =radio_01][@checked]「).val(); 一個名爲 radio_01的radio所選的值

$("A B") 查找A元素下面的全部子節點，包括非直接子節點

$("A>B") 查找A元素下面的直接子節點

$("A+B") 查找A元素後面的兄弟節點，包括非直接子節點

$("A~B") 查找A元素後面的兄弟節點，不包括非直接子節點 

1. $("A B") 查找A元素下面的全部子節點，包括非直接子節點

例子：找到表單中全部的 input 元素

HTML 代碼:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代碼:

$("form input")

結果:

[ <input name="name" />, <input name="newsletter" /> ] 

2. $("A>B") 查找A元素下面的直接子節點

例子：匹配表單中全部的子級input元素。

HTML 代碼： 

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代碼:

$("form > input")

結果:

[ <input name="name" /> ]

3. $("A+B") 查找A元素後面的兄弟節點，包括非直接子節點

例子：匹配全部跟在 label 後面的 input 元素

HTML 代碼:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代碼:

$("label + input")

結果:

[ <input name="name" />, <input name="newsletter" /> ]

4. $("A~B") 查找A元素後面的兄弟節點，不包括非直接子節點

例子：找到全部與表單同輩的 input 元素

HTML 代碼:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代碼:

$("form ~ input")

結果:

[ <input name="none" /> ]