簡單講解jQuery中的子元素過濾選擇器_jquery
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB原創
- 2016-05-16 15:04:502081瀏覽
子元素過濾器的過濾規則是透過父元素和子元素的關係來取得對應的元素。
$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个li 元素
我們知道使用
:first
過濾選擇器可以取得指定父元素中的首個子元素，但該選擇器傳回的只有一個元素，並不是一個集合，而使用
:first-child
子元素過濾選擇器則可以取得每個父元素中傳回的首個子元素，它是一個集合，常用多個集合資料的選擇處理。
如下圖，如果想把頁面中每個ul中的第一個li獲取到，並改變其顏色。則可以使用
: first-child
<body>
<h3>该百年额米格“蔬菜水果”中第一行的文字颜色</h3>
<ul>
<li>芹菜</li>
<li>茄子</li>
<li>萝卜</li>
<li>大白菜</li>
<li>西红柿</li>
</ul>
<ul>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>苹果</li>
<li>西瓜</li>
</ul>
</body>
<script type="text/javascript">
$("li:first-child").css("color", "red");
</script>
瀏覽器中顯示的效果：
透過
$("li:first-child")
選擇器程式碼，取得了兩個
- 父元素中的第一個
- 元素，並使用
css()
方法修改了它們在頁面中顯示的文字顏色。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn