jQuery的選擇器大全
jQuery的選擇器
一、 基本選擇器
1. ID選擇器
ID選擇器#id就是利用DOM元素的id屬性值來篩選匹配的元素，並以iQuery包裝集的形式返回給物件。
使用公式:$("#id")
示例：$("#box") //獲取id屬性值為box的元素
2. 元素選擇器
元素選擇器是根據元素名稱匹配相應的元素。元素選擇器指向的是DOM元素的標記名，也就是說元素選擇器是根據元素的標記名選擇的。
使用公式：$("element")
示例：$("div") //獲取所有div元素
3.類名選擇器
類選擇器是通過元素擁有的CSS類的名稱查詢匹配的DOM元素。在一個頁面中，一個元素可以有多個CSS類，一個CSS類又可以匹配多個元素，如果有元素中有一個匹配類的名稱就可以被類選擇器選取到。簡單地說類名選擇器就是以元素具有的CSS類名稱查詢匹配的元素。
使用公式：$(".class")
示例：$(".box") //獲取class屬性值為box的所有元素
4.複合選擇器
複合選擇器將多個選擇器（可以是ID選擇器、元素選擇器或是類名選擇器）組合在一起，兩個選擇器之間以逗號","分隔，只要符合其中的任何一個篩選條件就會被匹配，返回的是一個集合形式的jQuery包裝集，利用jQuery索引器可以取得集合中的jQuery物件。
注意：多種匹配條件的選擇器並不是匹配同時滿足這幾個選擇器的匹配條件的元素，而是將每個匹配的元素合併後一起返回。
使用公式：$("selector1,selector2,......,selectorN")
selector1:一個有效的選擇器，可以是ID選擇器、元素選擇器或類名選擇器等
selector2:另一個有效的選擇器，可以是ID選擇器、元素選擇器或類名選擇器等
selectorN:（可選擇）任意多個選擇器，可以是ID選擇器、元素選擇器或類名選擇器等
示例：$("div,#btn") //要查詢文件中的全部的<div>元素和id屬性為btn的元素
5.萬用字元選擇器
$("*") //取得頁面上所有的DOM元素集合的jQuery包裝集
二、層次選擇器
1. ancestor descendant選擇器
ancesdor descendant選擇器中ancestor代表祖先，descendant代表子孫，用於在給定的祖先元素下匹配所有的後代元素
使用公式：$("ancestor descendant")
ancestor是指任何有效的選擇器。
descendant是用以匹配元素的選擇器，並且它是ancestor所指定元素後代元素
示例：$("ul li") //匹配ul元素下的全部li元素
2. parent>child選擇器
parent>child選擇器中的parent代表父元素，child代表子元素，用於在給定的父元素下匹配所有的子元素，使用該選擇器只能選擇父元素的直接子元素
使用公式：$(" parent>child ")
parent是指任何有效的選擇器
child是用以匹配元素的選擇器，並且它是parent元素的子元素
示例：$(" form>input ") //匹配表單中所有的子元素input
3.prev+next選擇器
pev+next選擇器用於匹配所有緊接在prev元素後的next元素，其中，prev和next是兩個相同級別的元素
使用公式：$("prev+next")
prev是指任何有效的選擇器
next是一個有效選擇器並緊接著prev選擇器
示例：$("div+img") //匹配<div>標籤後的<img>標記
4. prev~siblings選擇器
prev~siblings選擇器用於匹配prev元素之後的所有siblings元素，其中prev和siblings是個相同輩元素
使用公式：$("prev~siblings")
prev是指任何有效的選擇器
三、過濾選擇器
1.簡單過濾器
簡單過濾器是指以冒號開頭，通常用於實現簡單過濾效果的過濾器
:first
說明：匹配找到的第一個元素，它是與選擇器結合使用的
示例：$("tr:first") //匹配表格的第一行
:last
說明：匹配找到的最後一個元素，它是與選擇器結合使用的
示例：$("tr:last") //匹配表格最後一行
:even
說明：匹配所有索引值為偶數的元素，索引值從0開始計數
示例：$("tr:even") //匹配索引值為偶數的行
:odd
說明：匹配所有索引值為奇數的元素，索引值從0開始計數
示例：$("tr:odd") //匹配索引值為奇數的行
:eq(index)
說明：匹配一個給定索引值的元素
示例：$("div:eq(1)") //匹配第二個div元素
:gt(index)
說明：匹配所有大於給定索引值的元素
示例：$("span:gt(0)") //匹配索引大於0的span元素（注：大於0,而不包括0)
:lt(index)
說明：匹配所有小於給定索引值的元素
示例：$("div:lt(2)") //匹配索引小於2的div元素（注：小於2,而不包括2)
:header
說明：匹配h1,h2,h3......之類的標題元素
示例：$(".cls:header") //匹配全部類名為cls的標題元素，如果":"前不寫則匹配所有的標題元素
:not(selector)
說明：去除所有給定選擇器匹配的元素
示例：$("input:not(:checked)") //匹配沒有被選中的input元素
animated
說明：匹配所有正在執行動畫效果的元素
示例：$("div:animated") //匹配正在執行的動畫的div元素
2.內容過濾器
內容過濾器就是通過DOM元素包含的文字內容以及是否含有匹配的元素進行篩選
:contains(text)
說明：匹配包含給定文字的元素
示例：$("li:contains('word')") //匹配含有"word"文字內容的元素
:empty
說明：匹配所有不包含子元素或者文字的空元素
示例：$("td:empty") //匹配不包含子元素或者文字的單元格
:has(selector)
說明：匹配含有選擇器所匹配元素的元素
示例：$("td:has(p)") //匹配表格的單元格中還有<p>標記的單元格
:parent
說明：匹配含有子元素或者文字的元素
示例：$("td:parent") //匹配不為空的單元格，即在該單元格中還包括子元素或則文字
3.可見性過濾器
元素的可見狀態有兩種，分別是隱藏狀態和顯示狀態。可見性過濾器就是利用元素的可見狀態匹配元素的
:visible
說明：匹配所有可見元素
:hidden
說明：匹配所有不可見元素
注意：在應用:hidden過濾器時，display屬性是none以及input元素的type屬性為hidden的元素都會被匹配識別
4.表單物件的屬性過濾器
表單物件的屬性過濾器通過表單元素的狀態屬性（例如：選中、不可用等狀態）匹配元素
:checked
說明：匹配所有選中的被選中元素
示例：$("input:checked") //匹配所有被選中的input元素
:disabled
說明：匹配所有不可用元素
示例：$("input:disenabled") //匹配所有不可用input元素
:enabled
說明：匹配所有可用的元素
示例：$("input:enabled") //匹配所有可用的input元素
:selected
說明：匹配所有選中的option元素
示例：$("select option:selected") //匹配所有被選中的選項元素
5.子元素過濾器
子元素選擇器就是篩選給定某個元素的子元素，具體的過濾條件由選擇器的種類而定
:first-child
說明：匹配所有給定元素的第一個子元素
示例：$("ul li:first-child") //匹配ul元素中的第一個子元素li
:last-child
說明：匹配所有給定元素的最後一個子元素
示例：$("ul li:last-child") //匹配ul元素中的最後一個子元素li
:only-child
說明：如果某個元素是它父元素中唯一的子元素，那麼將會被匹配，如果父元素中含有其他元素，則不會被匹配
示例：$("ul li:only-child") //匹配只含有一個li元素的ul元素中的li
:nth-child(index/even/odd/equation)
說明：匹配可每個父元素下的第index個子或奇偶元素，index從1開始，而不是從0開始
示例：$("ul li :nth-child(even)") //匹配ul中索引值為偶數的li元素
$("ul li:nth-child(3)") //匹配ul中第3個li元素
四、屬性選擇器
屬性選擇器就是通過元素的屬性作為過濾條件進行篩選物件
[attribute]
說明：匹配包含給定屬性的元素
示例：$("div[name]") //匹配包含有name屬性的div元素
[attribute=value]
說明：匹配屬性值為value的元素
示例：$("div[name='test']") //匹配name屬性是test的div元素
[attribute!=value]
說明：匹配屬性值不等於value的元素
示例：$("div[name!='test']") //匹配name屬性不是test的div元素
[attribute*=value]
說明：匹配屬性值含有value的元素
示例：$("div[name*="test"]") //匹配name屬性值中含有test值的div元素
[attribute^=value]
說明：匹配屬性值以value開始的元素
示例：$("div[name^='test']") //匹配name屬性以test開頭的div元素
[attribute$=value]
說明：匹配屬性值以value結束的元素
示例：$("div[name$='test']") //匹配name屬性以test結尾的div元素
[selector1][selector2][selectorN]
說明：複合屬性選擇器，需要同時滿足多個條件時使用
示例：$("div[id][name^='test']") //匹配具有id屬性並且name屬性是以test開頭的div元素
五、表單選擇器
表單選擇器是匹配經常在表單內出現的元素。但是匹配的元素不一定在表單中
:input
說明：匹配所有的input元素
示例：
$(":input") //匹配所有的input元素
$("form :input") //匹配<form>標記中的所有input元素，需要注意，在form和冒號之間有一個空格
:button
說明：匹配所有的普通按鈕，即type="button"的input元素
示例：$(".button") //匹配所有普通按鈕
:checkbox
說明：匹配所有的複選框
示例：$(":checkbox") //匹配所有的複選框
:file
說明：匹配所有的檔案域
示例：$(":file") //匹配所有的檔案域
:hidden
說明：匹配所有的不可見元素，或者type為hidden的元素
示例：$(":hidden") //匹配所有的隱藏域
:image
說明：匹配所有的影象域
示例：$(":image") //匹配所有的影象域
:password
說明：匹配所有的密碼域
示例：$(":password") //匹配所有的密碼域
:radio
說明：匹配所有的單選按鈕
示例：$(":radio") //匹配所有的單選按鈕
:reset
說明：匹配所有的重置按鈕，即type="reset"的input元素
示例：$(":reset") //匹配所有的重置按鈕
:submit
說明：匹配所有的提交按鈕，即type="submit"的input元素
示例：$(":submit") //匹配所有的提交按鈕
:text
說明：匹配所有的單行文字框
示例：$(".text") //匹配所有的單行文字框
選擇器中注意事項
1.選擇器中含有特殊符號的注意事項
含有"."、"#"、"{"、"}"等特殊字元：根據W3C規定，屬性值中是不能包含這些特殊字元的，但在實際的專案中偶爾會遇到這種表示式中含有"#"和"}"等特殊字元的情況。這時，如果按照普通方法去處理的話就會出現錯誤，解決這類錯誤的方法是使用轉義符號將其轉義。
<div id="li#db">liaidb</div>
<div id="lidb(1)">lilovedb</div>
如果按照普通方式來獲取，例如：
$("#li#db");
$("#lilovedb(1)");
這樣是不能正確獲取到元素的，正確的寫法如下：
$("#li\\#db");
$("#lilovedb\\(1\\)");
2.屬性選擇器的@符號問題：
在jQuery升級版本過程中，jQuery在1.3.1版本中徹底放棄了1.1.0版本遺留的@符號，假如我們使用1.3.1以上的版本，那麼不需要在屬性前新增@符號
$("div[@name="lidb"]");
正確寫法是將@符號去掉，即改為如下形式：
$("div[name="lidb"]");
選擇器中空格的注意事項
在實際應用當中，選擇器中含有空格也是不容忽視的，多一個空格或則少一個空格也會得到截然不同的結果。
<div class="name">
<div style="display: none;">小李</div>
<div style="display: none;">小王</div>
<div style="display: none;">小明</div>
<div style="display: none;" class=name>小張</div>
</div>
<div style="display: none;" class=name>小玉</div>
<div style="display: none;" class=name>小劉</div>
使用如下的jQuery選擇器分別獲取它們
<script type="text/javascript">
var $a=$(".name :hidden");
var $b=$(".name:hidden");
console.log($a)
console.log($b)
</script>
以上程式碼會出現不同的結果，是因為後代選擇器和過濾選擇器的不同