本文實例講述了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 程式設計有所幫助。
