$的選擇器部分:
凡是運用$,其返回值是一個object
$選擇器主要用於選擇標簽.基本用法是同css的選擇器.但是,很讓人興奮的是,他支持常見的浏覽器,而css中很多選擇器是IE6所不支持的.
1.基本選擇器(3種): ----凡是運用$,其返回值是一個object
$("標簽名"),如$("p")是選取了所有的p標簽節點
$("#id名"),如$("#test")是選取了id為test的標簽節點
$(".class名"),如$(".test")是選取了所有class為test的標簽節點
上面的$("標簽名")和$(".class名")返回的都是所有滿足的節點,至於進一步篩選可以添加一些函數,如eq,gt,lt等等.
2.組選擇器: ----3種基本選擇器的組合，“,”隔開
下面還是現做一個約定:把"標簽名或#id名或.class名"記作mix,則mix表示一個標簽名,或一個#id或一個.class.
$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")
3.後代選擇器: ----3種基本選擇器的組合，“ ”隔開，直系皆生效
$("mix mix"),當然可以是多個嵌套,但後代選擇器可以是深層子代,所以$("mix mix mix ...")這種寫法作用不大.例子:$("div .test"):在div標簽內的所有具有test的class的後代元素(就是被div嵌套的class屬性為test的標簽)
4.子選擇器: ----3種基本選擇器的組合，“>”隔開，只親子有效
$("mix>mix"),這個放在後代選擇器後面是為了和它做對比.子選擇器只能選擇第一代子代.不處理深層嵌套.例子:
$("div>.test")
<div><p class="test"></p></div>對這裡的p段落標簽有效.但對
<div><p><p class="test"></p></p></div>對這裡的p段落標簽無效,這裡要用
$("div .test)
5.臨近選擇器: ----3種基本選擇器的組合，“+”隔開，只下一個兄弟節點
$("mix+mix"),選取下一個兄弟節點.如:$("div +#test"),id為test的的節點必須是div的下一個兄弟節點.
<div></div><p id="test"></p>在$("div + #test")中能取到p段落節點
<div></div><p></p><p id="test"></p>則不能取到
6.屬性選擇器: ----“ |=|^|$|*”
把屬性選擇器不放在css選擇器裡面是因為jQuery中寫法是不一樣的.至於css中寫法可以參考我之前寫的一篇css的選擇器一文.jQuery中是和xPath類似的寫法:
$("mix[@attr]"):選取所有該mix且具有attr屬性的節點
$("mix[@attr=a_value"]):選取所有該mix且具有attr屬性並滿足屬性值為a_value的節點
$("mix[@attr^=a_value_head"]):attr屬性的屬性值是以a_value_head開頭的
$("mix[@attr$=a_value_end"]):attr屬性的屬性值是以a_value_end結尾的
$("mix[@attr*=a_value"]):attr屬性的屬性值中包含a_value
7. 限定選擇器:
這個名稱是我自己起的,其實選擇器組合都有限定的意思,你明白後面所介紹的知識即可.
具有限定子節點選擇器:$("mix1[mix2]"):返回包含mix2的mix1節點.如:$("div[a]"):包含a標簽的div.
這個和$("div a")不相同.後者表示div中的a標簽,返回的是a標簽對象,前者返回的是div標簽對象
冒號限定結點選擇器:$("mix:condition"):mix標簽,並且滿足限定條件.
E:root:類型為E,並且是文檔的根元素
E:nth-child(n):是其父元素的第n個類型為E的子元素 ,基數從1開始
E:first-child:是其父元素的第1個類型為E的子元素
E:last-child:是其父元素的最後一個類型為E的子元素
E:only-child:且是其父元素的唯一一個類型為E的子元素