jQuery子屬性過濾選擇器用法分析_jquery

本文實例講述了jQuery子屬性過濾選擇器用法。分享給大家供大家參考。具體分析如下：

1. :first-child選擇器

用來選擇其父級的第一個子元素的所有元素，格式:

複製程式碼 程式碼如下:

$("selector:first-child")

如：

複製程式碼 程式碼如下:

$("ul:first-child").css( "text-decoration", "underline").css("color", "blue");

2. :last-child選擇器

用來選擇其父級的最後一個子元素的所有元素，格式:

複製程式碼 程式碼如下:

$("selector:last-child")

如：

複製程式碼 程式碼如下:

$("ul:last-child").css( "text-decoration", "underline").css("color", "red");

3. :nth-child選擇器

用來選擇父元素下的第N個子元素或奇偶元素。

語法格式:

複製程式碼 程式碼如下:

$("selector:nth-child(index/even /odd/equation)");

如：

複製程式碼 程式碼如下:

$("ul li:nth-child(4)" ).css("color", "red");//將ul元素下的第5個元素的文字顏色設為紅色，即該li元素的索引值為4

4. :only-chilid選擇器

用來選擇某元素的惟一選擇器

格式：

複製程式碼 程式碼如下:

$("selector:only-chilid")

$("selector:only-chilid")

簡單範例：

複製程式碼

程式碼如下:

 
 
 
 
 
 
 
     $(文檔).ready(function() { 
           $("表 tr:first-child").css("背景", "#FCF"); 
           $("table tr:last-child").css("背景", "黃色"); 
           $("tr td:nth-child(even)").css("邊框", "1px 純紅色"); 
           $("div h3:only-child").css("顏色", "#999"); 
         }); 
腳本> 
頭> 
 
 
子元素過濾器應用實例

 
 
     
       
       
       
       
       
     
     
       
       
       
       
       
     
     
       
       
       
       
       
     
     
       
       
       
       
       
     
     
       
       
       
       
       
     
表> 
正文> 

效果圖如下：

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