首頁  >  文章  >  web前端  >  jQuery選擇器:first-child和:nth-child以及:last-child的使用總結

jQuery選擇器:first-child和:nth-child以及:last-child的使用總結

黄舟
黄舟原創
2017-06-23 14:53:581694瀏覽

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

此選擇器能夠符合父元素的第一個子元素。

語法結構:

$(":first-child")

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

$("ul li:first-child").css("color","blue")

以上程式碼能夠將父元素下的第一個li元素中的字體顏色設定為藍色。

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

實例代碼:






:first-child选择器-一聚教程




  • ASP教程
  • ASP.NET教程
  • PHP教程
  • html教程
  • DIV+CSS教程
  • jQUERY教程
  • jAVAScript教程

以上程式碼中,點選按鈕可以將每個ul下的第一個li元素的文字顏色設定為藍色。

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

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

$(":nth-child")

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

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

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

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

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

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

實例程式碼:






:nth-child选择器-一聚教程




  • ASP教程
  • ASP.NET教程
  • ;PHP教程
  • html教程
  • DIV+CSS教程
  • jQUERY教程
  • jAVAScript教程

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

此選擇器能夠符合父元素的最後一個子元素。

注意:last只選取一個元素,而此選擇符將符合每個父元素的最後一個子元素。
語法結構:

$(":last-child")

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

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

以上程式碼能夠將父元素下最後一個li元素中的字體顏色設定為藍色。

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

實例程式碼:






一聚教程




  • ASP教程
  • ASP.NET教程
  • PHP教程
  • html教程
  • DIV+CSS教程
  • jQUERY教程
  • jAVAScript教程

以上是jQuery選擇器:first-child和:nth-child以及:last-child的使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn