jQuery選擇器

jQuery選擇器

基本選擇器

選擇id

$("#name"):選擇id爲name的元素

選擇類

$(".name"):選擇全部類爲name的元素

選擇元素

$("p"):選擇全部標籤爲p的元素

通配符選擇器

$("*")：選擇全部的元素

並列選擇器(選擇器組)

這裏能夠並列全部類型的選擇器，包括基本選擇器，層次選擇器，過濾選擇器，表單選擇器，組合選擇器等等全部的選擇器，把每個選擇按逗號分隔開，至關於每個選擇器都起做用，返回全部選擇器的結果 $("#name,.name,p,div"):選擇id爲name的元素，全部的class爲name的元素，以及全部標籤爲p的元素 $("p.name,div"):選擇全部class名爲那麼的p元素和全部的div元素 $("div~p,.name"):選擇全部的class爲name的元素以及div後面的兄弟元素中的全部p元素

層次選擇器

這裏的每一個選擇器均可以是全部類型的選擇器

選擇後代元素

$("div p"):選擇div元素的後代中的全部p元素 $(".name p"):選擇class爲name的元素得後代中的全部p元素 $("#name p"):選擇id爲name的元素的後代中的全部p元素

選擇子元素

$("div>p"):選擇div元素的子元素中的全部p元素 $(".name>p"):選擇class爲name的元素的子元素中的全部p元素 $("#name>p"):選擇id爲name的元素的子元素中的全部p元素

選擇下一個兄弟元素

$("div+p"):選擇div元素後面的標籤爲p的第一個兄弟元素 $(".name+p"):選擇class爲name的元素後面的標籤爲p的第一個兄弟元素 $("#name+p"):選擇class爲name的元素後面的標籤爲p的第一個兄弟元素 可使用下面的方法來替代 $("div").next(".name") 與$("div>.name")功能同樣

選擇後面全部的兄弟元素

$("div~p"):選擇div元素後面的標籤爲p的全部兄弟元素 $("#name~.name"):選擇id爲name元素的後面的全部的class爲那麼的兄弟元素 可使用下面的方法來代替 $("div").nextAll("p")：與$("div~p")的功能同樣 另外還有一個siblings方法 $("div").siblings("p"):表示選擇div的全部兄弟元素中標籤爲p的元素，無論先後

過濾選擇器

基本過濾選擇器

:first

選擇第一個元素，前面能夠加一個任何類型的選擇器，表示選擇符合這些要求的選擇器中的第一項
$(div:first):選擇第一個div元素
$(div p:first):選擇div元素的全部標籤爲p的後代元素中的第一項

:last

表示選擇最後一項元素,和:first做用相似，就是選擇的條件不一樣

:even

表示選擇奇數項的元素,和:first做用相似，就是選擇的條件不一樣

:odd

表示選擇偶數項的元素,和:first做用相似，就是選擇的條件不一樣

:eq(一個數字)

表示選擇索引值等一這個數字的項，索引值從0開始
$(div:eq(0)):表示選擇第一個div元素
$(div:eq(3)):表示選擇第四個div元素 其餘的和:first做用相似，就是選擇的條件不一樣

:lt(一個數字)

表示索引值小於這個數字的全部的元素，索引值從0開始，其餘的和:first做用相似，就是選擇的條件不一樣

:gt(一個數字)

表示索引值大於這個數字的全部的元素，索引值從0開始，其餘的和:first做用相似，就是選擇的條件不一樣

not(selector)

表示選擇和selector中給定的條件不一樣的元素，selector可使任意的選擇器，其餘的和:first做用相似，就是選擇的條件不一樣
$("div:not(.name)"):選擇div元素中類名不是name的元素

:header

表示選的全部的標題元素h h1 h2等等
$(div :header):選擇div的後代元素中全部的標題元素，注意這裏有一個空格，若是沒有空格就變成了選擇全部的div中的標題元素，這樣是沒有意義的，因此:header通常都是做爲一個獨立的成分來使用的，不用依託於其餘元素
$(":header"):選擇頁面中全部的標題元素

:animated

表示選擇正在播放動畫的元素 $(":animated"):頁面中全部正在播放動畫的元素
$("div:animate"):沒有空格，表示選擇全部正在播放動畫的div元素
$("div :animated"):有空格，表示選擇div後代元素中全部的正在播放動畫的元素

基本過濾選擇器總結

:first,:last,:eq(),:not(),:lt(),:gt(),:even(),:odd()
這些元素必須依託於其餘元素或者選擇器起做用，因此和前面的內容之間不能有空格
:header
它不依託與前面的元素或者選擇器，因此能夠單獨使用，若是和其餘選擇器一塊兒使用則是把它當作一個單獨的選擇器來用。
:animated
它同時具備上面兩類元素的特色，既能夠依託於其餘的元素或者選擇器，也能夠本身單獨使用

內容過濾選擇器

:contains(text)

選取後代元素中含有給定的文本內容的元素，和元素或者各類選擇器聯合起來起做用
$(div:contains("我")):選取後代元素中含有「我」的div元素
$(div p:contains("w")):選取爲div的後代元素的p元素的後代中，含有「我」的全部的p元素

:has(selector)

選取後代元素中含有符合selector要求的元素，和其餘元素或者選擇器一塊兒使用
$("div:has(.name)"):選擇後代元素中含有類名的name的元素的div元素

:empty

選擇不含有子元素（包括文本元素）的元素

:parent

選擇含有子元素（包括文本元素）的元素

屬性過濾選擇器

[attr]

選擇含有某個屬性的元素
$("div[title]「):選擇含有title屬性的div元素

[attr=value]

選擇屬性值等於某個值得元素
$("div[title=test]」):選擇title屬性的值等於test的div元素

[attr!=value]

選擇屬性不值等於某個值得元素
$("div[title!=test]」):選擇title屬性的值不等於test的div元素

[attr^=value]

選擇屬性值以某個字符或者字符串開頭的元素
$("div[title^=te]」):選擇title屬性的值以te開頭的div元素

[attr$=value]

選擇屬性值以某個字符或者字符串結尾的元素
$("div[title$=te]」):選擇title屬性的值以te結尾的div元素

[attr*=value]

選擇屬性值中包含某個字符或者字符串的元素 $("div[title*=te]」):選擇title屬性的值中含有te的div元素

[selector1][selector1]...[selectorN]

能夠多個屬性選擇器混合使用 $("div[title=te][width=100px]」):選擇title屬性值爲te，width屬性爲100px的div元素

子元素過濾選擇器

:nth-child()

括號中能夠放數字，表達式，odd，even
表示選擇某個元素的父元素中索引值爲幾的子元素，索引值從1開始 $("ul li:nth-child(2)"):找到ul的全部後代li元素，找到每個li元素的父元素中第二個子元素
$("ul li:nth-child(even)"):找到ul的全部後代li元素，找到每個li元素的父元素中索引值爲奇數的子元素 
$("ul li:nth-child(odd)"):找到ul的全部後代li元素，找到每個li元素的父元素中索引值爲偶數的子元素
$("ul li:nth-child(3n+1)"):找到ul的全部後代li元素，找到每個li元素的父元素中索引值爲3n+1的子元素

:first-child

找到父元素中的第一個子元素 $("ul li:first-child"):找到ul的全部後代li元素，找到每個li元素的父元素中的第一個子元素

:last-child

找到父元素中的最後一個子元素 $("ul li:last-child"):找到ul的全部後代li元素，找到每個li元素的父元素中的最後一個子元素

:only-child

判斷某個元素是不是它父元素中的惟一元素，若是是則返回這個元素，若是不是則不返回任何東西 找到父元素中的第一個子元素 $("ul li:only-child"):找到ul的全部後代li元素，判斷每個li是不是它的父元素中惟一的元素，若是是則匹配這個li，若是不是，則什麼都不匹配。

可見性過濾選擇器

:hidden

選取全部不可見的元素，便可以做爲一個獨立的選擇器使用，也能夠和其餘選擇器一塊兒使用 $(":hidden"):選取頁面中全部不可見的元素
$("div:hidden"):選擇全部不可見的div元素 $("div :hidden"):選擇div後代元素中全部的不可見得元素

:visible

選取全部可見的元素，便可以做爲一個獨立的選擇器使用，也能夠和其餘選擇器一塊兒使用 $(":visible"):選取頁面中全部可見的元素
$("div:visible"):選擇全部可見的div元素 $("div :visible"):選擇div後代元素中全部的可見得元素

表單過濾選擇器

這類選擇器主要針對表單元素

:enabled

選取全部可用的元素。便可以單獨做用，也能夠和其餘選擇器一塊兒做用 $("form :enabled"):選取form元素的後代元素中全部可用的元素,有空格 $("input:enabled"):選取全部可用的input元素，沒有空格

:disabled

選取全部不可用的元素。便可以單獨做用，也能夠和其餘選擇器一塊兒做用 $("form :disabled"):選取form元素的後代元素中全部可用的元素 $("input:enabled"):選取全部不可用的input元素，沒有空格

:checked

選擇被選中的元素，主要針對單選複選框 $("input:checked"):選取input中被選中的元素

:selected

選擇被選中的元素，主要針對下拉列表，select，option $("option:selected"):選取option中被選中的元素 $("select :selected"):選取select後代元素中中被選中的元素

表單選擇器

這些元素都是獨立使用的元素

:input

選擇全部的input，textarea，select，button元素

:text

選取全部type爲text的input元素

:password

選取全部type爲password的input元素

:radio

選取全部type爲radio的input元素

:checkbox

選取全部type爲checkbox的input元素

:submit

選取全部type爲submit的input元素

:image

選取全部type爲image的input元素

:button

選取全部的button元素

:file

選取全部的上傳域，即type爲file的input元素

組合選擇器

上訴全部的選擇器，能夠按任意的方式組合起來，造成一個強大的組合選擇器。同時，一個組合選擇器能夠放在選擇器組中，當成選擇器組中的一項。 $(div p:nth-child(1)):首先找到div全部的後代p元素，而後找到全部p元素的父元素中的第一個子元素。