jQuery 選擇器多個(gè)使用方法介紹

$的選擇器部分:
凡是運(yùn)用$,其返回值是一個(gè)object
$選擇器主要用于選擇標(biāo)簽.基本用法是同css的選擇器.但是,很讓人興奮的是,他支持常見的瀏覽器,而css中很多選擇器是IE6所不支持的.

1.基本選擇器(3種): ----凡是運(yùn)用$,其返回值是一個(gè)object
$("標(biāo)簽名"),如$("p")是選取了所有的p標(biāo)簽節(jié)點(diǎn)
$("#id名"),如$("#test")是選取了id為test的標(biāo)簽節(jié)點(diǎn)
$(".class名"),如$(".test")是選取了所有class為test的標(biāo)簽節(jié)點(diǎn)
上面的$("標(biāo)簽名")和$(".class名")返回的都是所有滿足的節(jié)點(diǎn),至于進(jìn)一步篩選可以添加一些函數(shù),如eq,gt,lt等等.

2.組選擇器: ----3種基本選擇器的組合，“,”隔開
下面還是現(xiàn)做一個(gè)約定:把"標(biāo)簽名或#id名或.class名"記作mix,則mix表示一個(gè)標(biāo)簽名,或一個(gè)#id或一個(gè).class.
$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")

3.后代選擇器: ----3種基本選擇器的組合，“ ”隔開，直系皆生效
$("mix mix"),當(dāng)然可以是多個(gè)嵌套,但后代選擇器可以是深層子代,所以$("mix mix mix ...")這種寫法作用不大.例子:$("div .test"):在div標(biāo)簽內(nèi)的所有具有test的class的后代元素(就是被div嵌套的class屬性為test的標(biāo)簽)

4.子選擇器: ----3種基本選擇器的組合，“>”隔開，只親子有效
$("mix>mix"),這個(gè)放在后代選擇器后面是為了和它做對(duì)比.子選擇器只能選擇第一代子代.不處理深層嵌套.例子:
$("div>.test")
<div><p class="test"></p></div>對(duì)這里的p段落標(biāo)簽有效.但對(duì)
<div><p><p class="test"></p></p></div>對(duì)這里的p段落標(biāo)簽無效,這里要用
$("div .test)

5.臨近選擇器: ----3種基本選擇器的組合，“+”隔開，只下一個(gè)兄弟節(jié)點(diǎn)
$("mix+mix"),選取下一個(gè)兄弟節(jié)點(diǎn).如:$("div +#test"),id為test的的節(jié)點(diǎn)必須是div的下一個(gè)兄弟節(jié)點(diǎn).
<div></div><p id="test"></p>在$("div + #test")中能取到p段落節(jié)點(diǎn)
<div></div><p></p><p id="test"></p>則不能取到

6.屬性選擇器: ----“ |=|^|$|*”
把屬性選擇器不放在css選擇器里面是因?yàn)閖Query中寫法是不一樣的.至于css中寫法可以參考我之前寫的一篇css的選擇器一文.jQuery中是和xPath類似的寫法:
$("mix[@attr]"):選取所有該mix且具有attr屬性的節(jié)點(diǎn)
$("mix[@attr=a_value"]):選取所有該mix且具有attr屬性并滿足屬性值為a_value的節(jié)點(diǎn)
$("mix[@attr^=a_value_head"]):attr屬性的屬性值是以a_value_head開頭的
$("mix[@attr$=a_value_end"]):attr屬性的屬性值是以a_value_end結(jié)尾的
$("mix[@attr*=a_value"]):attr屬性的屬性值中包含a_value

7. 限定選擇器:
這個(gè)名稱是我自己起的,其實(shí)選擇器組合都有限定的意思,你明白后面所介紹的知識(shí)即可.
具有限定子節(jié)點(diǎn)選擇器:$("mix1[mix2]"):返回包含mix2的mix1節(jié)點(diǎn).如:$("div[a]"):包含a標(biāo)簽的div.
這個(gè)和$("div a")不相同.后者表示div中的a標(biāo)簽,返回的是a標(biāo)簽對(duì)象,前者返回的是div標(biāo)簽對(duì)象
冒號(hào)限定結(jié)點(diǎn)選擇器:$("mix:condition"):mix標(biāo)簽,并且滿足限定條件.
E:root:類型為E,并且是文檔的根元素
E:nth-child(n):是其父元素的第n個(gè)類型為E的子元素 ,基數(shù)從1開始
E:first-child:是其父元素的第1個(gè)類型為E的子元素
E:last-child:是其父元素的最后一個(gè)類型為E的子元素
E:only-child:且是其父元素的唯一一個(gè)類型為E的子元素

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)