Jquery偽選擇器學習筆記

對於我這個半路出家的前端，使用jquery已經很長時間了，對於選擇器，一直都侷限在id，class，element選擇器。每次寫乙個元素都得想乙個id，乙個頁面寫下來想id名都想的累的慌。最近手頭專案比較多，頭暈腦脹的，遂決定每天下班回去還是得學學jquery的其它強**擇器，邊學邊做點筆記吧。

一、偽選擇器

:first / :last

匹配找到的第乙個/最後乙個子元素

:first-child / :last-child

匹配第乙個/最後乙個元素

筆記：這兩組是最先讓我分不清的。看著解釋好像差別不是很大。但舉個例子來看，就會發現大不同了。

<

div 
id="div1"
>
<
p id
="p1"
>p1
p>
div>
<
div 
id="div2"
>second
div>
<
div 
id="div3"
>
<
p id
="p2"
>p2
p>
<
p id
="p3"
>p3
p>
<
p id
="p4"
>
<
span 
id="span1"
>span1
span
>
<
span 
id="span2"
>span2
span
>
p>
div>
<
div 
id="div4"
>
<
p id
="p5"
>p5
p>
div>
<
table
>
<
tr><
td>1
td>
tr>
<
tr><
td>2
td>
tr>
<
tr><
td>3
td>
tr>
<
tr><
td>4
td>
tr>
table
>

//

a $("td:first").css('color','blue');
$("p:first").css('color','red'); //
b $("td:first-child").css('color','blue');
$("p:first-child").css('color','red');

為何乙個一點的差別，結果確是如此大區別呢？

jquery手冊上解釋：

:first­child 能夠匹配第乙個子元素，並為每個父元素匹配乙個子元素。

:first只匹配乙個元素

這樣的解釋也許還不太明白，但是換一種說法就明白多了，:first­child在匹配的時候，先找到它的父元素，然後再把所有父元素的第乙個子元素匹配出來，而:first只匹配第乙個父元素的第乙個子元素。

p的父元素div,:first­child能匹配上p1,p2,p5，而:first只能匹配上p1

td的父元素是tr，:first­child能匹配上1，2，3，4，而:first­只能匹配第乙個1。

jQuery偽類選擇器

一 簡單偽類選擇器 not selector 選擇除了某個選擇器之外的所有元素 first或first 選擇某元素的第乙個元素 非子元素 last或last 選擇某元素的最後乙個元素 非子元素 odd 選擇某元素的索引值為奇數的元素 even 選擇某元素的索引值為偶數的元素 eq index 選擇給...

JQuery 偽類選擇器

ul li one li li two li li three li ul 所有的偽類選擇器，都將圍繞上面的html 第乙個節點 ul li first child one 最後乙個節點 ul li last child three 第二個節點 通過索引。ul li eq 1 two 通過節點數。u...

JQuery 選擇器學習筆記

img removeattr title 移除指定元素屬性值 p last addclass lastp addclass 為指定元素新增class,p last 為最後乙個p元素 p first addclass firstp 同上，只不過是第乙個p元素 p last removeclass 移除...