jQuery中:nth-child選擇器用法實例_jquery

本文實例講述了jQuery中:nth-child選擇器用法。分享給大家供大家參考。具體分析如下：

此選擇器符合其父元素下的第N個子或奇偶元素。
:eq(index)選擇器只符合一個元素，而:nth-child選擇器將為每個父元素匹配子元素。
:nth-child從1開始的，而:eq()是從0開始。
語法結構:

複製程式碼 程式碼如下:

$(":nth-child")

$(":nth-child")

此選擇器一般也要和其他選擇器搭配使用，例如類別選擇器、元素選擇器等等。例如:

複製程式碼

程式碼如下:

$("li:nth-child(2)").css("color ","blue")

以上程式碼能夠將父元素下第二個li元素中的字體顏色設定為藍色。也可以計算父元素的奇偶子元素。例如:

複製程式碼

程式碼如下:

$("li:nth-child(even)").css("color ","blue")

以上程式碼能夠將父元素下的排序為偶數的li元素中的字體顏色設定為藍色。
注意:

這裡有必要結合上面的程式碼再對概念進行一下說明。這裡所說的父元素不是li，而是li的父元素。 很多人往往誤以為是匹配li元素的子元素中的最後一個元素。

實例碼:

複製程式碼

程式碼如下:

 

   
• ASP教學

   
• ASP.NET教學

   
• ;PHP教學

 

 

   
• html教學

   
• DIV CSS教學

   
• jQUERY教學

   
• jAVAScript教學

 

點選查看效果

希望本文所述對大家的jQuery程式設計有所幫助。