JQuery選擇器

jQuery的選擇器是CSS 1-3，XPath的結(jié)合物。jQuery提取這二種查詢語言最好的部分，融合后創(chuàng)造出了最終的jQuery表達(dá)式查詢語言。

簡單的jQuery選擇器

很多jQuery程序，絕大部分的函數(shù)都是從$()開始的，$()函數(shù)簡化了javascript獲取DOM元素的復(fù)雜性，消除了使用for循環(huán)獲取一組DOM元素，所以$()函數(shù)獲取的DOM元素其實(shí)是一個(gè)DOM元素組成的數(shù)組。

eg:

$(”div”)：標(biāo)簽名，取得DOM文檔中所有div標(biāo)簽的元素，返回的是一個(gè)元素集合；
$(”#nickName”)：ID屬性，取得DOM文檔中ID為nickName的一個(gè)元素（ps：一個(gè)文檔中ID是唯一的），返回的是一個(gè)元素；
$(”.user”)：樣式名，取得DOM文檔中class為user的所有元素，返回的是一個(gè)元素集合；

這里再補(bǔ)充1個(gè)通配符，即*：

$(”*”):通配符，取得DOM文檔中所有節(jié)點(diǎn)元素；例如：$(”*”).css(”color”,”#FF3300″);則整個(gè)文檔的文字顏色都會(huì)顯示紅色。

jQuery的組合選擇器：

$(”selector1,selector2,selectorN”)：多元素組合選擇器，將每一個(gè)選擇器匹配到的元素合并后一起返回。你可以指定任意多個(gè)選擇器，并將匹配到的元素合并到一個(gè)結(jié)果內(nèi)。例如：$(”h1,div,li#nickName”)

JQuery的層級(jí)選擇器：

$(”ancestor descendant”):在給定的祖先元素下匹配所有的后代元素，即子孫元素,例如：$(”div span.num”);

$(”parent > child”):在給定的父元素下匹配所有的子元素,例如：$(”div>span”);

$(”prev + next”):匹配所有緊接在prev元素后的next元素，即第一個(gè)跟在后面的兄弟元素,例如：$(”p+span”);

$(”prev ~ siblings”):匹配 prev 元素之后的所有 siblings 元素，即一群跟屁蟲的兄弟元素（當(dāng)然也有可能是一個(gè)屁蟲的兄弟元素，那就和$(”prev + next”)等價(jià)了）,例如：$(”p~span”);

簡單的過濾選擇器

:animated：匹配所有正在執(zhí)行動(dòng)畫效果的元素集合；

:eq(index)：匹配索引為index的一個(gè)元素，例如：$(”div:eq(0)”)//第一個(gè)div；

:even：匹配索引為偶數(shù)的元素集合，例如：$(”div:even”)；

:odd：匹配索引為奇數(shù)的元素集合，例如：$(”div:odd”)；

:first：匹配找到的第一個(gè)元素，等價(jià)于:eq(0)，例如：$(”div:first”)；

:gt(index) ：匹配索引大于index的元素集合，例如：$(”div:gt(0)”)//除了第一個(gè)div外的所以div；

:lt(index)：匹配索引小于于index的元素集合，例如：$(”div:lt(0)”)；

:header：匹配h1-h6的所有元素集合；

:last：匹配找到的最后一個(gè)元素，例如：$(”div:last”)//最后一個(gè)div；

:not(selector)：去除所有與給定選擇器匹配的元素，例如：$(”input:not(:checked)”)//除了被選中的所有input；

Jquery的子元素選擇器

:first-child ：匹配每個(gè)父元素的第一個(gè)子元素，相當(dāng)于E:nth-child(0)，例如：$(”ul li:first-child”)；

:last-child ：匹配每個(gè)父元素的最后一個(gè)子元素，例如：$(”ul li: last -child”)；

:nth-child(index/even/odd/equation)：匹配每一個(gè)父元素的第N個(gè)子或奇偶元素，例如：$(”ul li:nth-child(2)”)；

:only-child ：如果某個(gè)元素是父元素中唯一的子元素，那將會(huì)被匹配$(”ul li:only-child”)；

子元素選擇器和過濾性選擇器的一些區(qū)別

:first-child和:first：

first只匹配一個(gè)元素，而:first-child將為每個(gè)父元素匹配一個(gè)子元素，所以:first-child匹配出來的是一個(gè)集合當(dāng)然也有可能只匹配一個(gè)元素，而:first永遠(yuǎn)只能匹配到一個(gè)元素。

:last-child和:last的區(qū)別道理也是一樣的；

:nth-child(index/even/odd/equation)和:eq(index)

:eq(index) 只匹配一個(gè)元素，索引值從0開始；

:nth-child(index/even/odd/equation) 匹配每一個(gè)父元素的第N個(gè)子或奇偶元素, 索引值從1開始,并且提供更豐富的參數(shù)及表達(dá)式；

:nth-child(even)// 匹配每一個(gè)父元素的偶數(shù)元素；

:nth-child(odd) // 匹配每一個(gè)父元素的奇數(shù)元素；

:nth-child(3n) // 匹配每一個(gè)父元素的索引值能被3整除的元素；

:nth-child(2) // 匹配每一個(gè)父元素的第2個(gè)元素；

:nth-child(3n+1) // 匹配每一個(gè)父元素的索引值被3整除后余1的元素

:nth-child(3n+2) // 匹配每一個(gè)父元素的索引值被3整除后余2的元素

所以:nth-child(index/even/odd/equation)匹配出來的是一個(gè)集合當(dāng)然也有可能只匹配一個(gè)元素，而:eq(index)永遠(yuǎn)只能匹配到一個(gè)元素。

久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

WIKI使用導(dǎo)航

站長百科導(dǎo)航

站長專題

JQuery選擇器