簡單講解jQuery中的子元素過濾選擇器
更新時間：2016年04月18日 17:26:11 作者：happyhaojie
這篇文章主要介紹了jQuery中的子元素過濾選擇器,列舉了一些操作DOM時獲取父元素的一些方法,需要的朋友可以參考下
子元素過濾器的過濾規(guī)則是通過父元素和子元素的關(guān)系來獲取相應(yīng)的元素。
$('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'); //每個父元素奇數(shù)li 元素
$('li:nth-child(even)').css('background', '#ccc'); //每個父元素偶數(shù)li 元素
$('li:nth-child(2)').css('background', '#ccc'); //每個父元素第三個li 元素
我們知道使用
:first
過濾選擇器可以獲取指定父元素中的首個子元素，但該選擇器返回的只有一個元素，并不是一個集合，而使用
:first-child
子元素過濾選擇器則可以獲取每個父元素中返回的首個子元素，它是一個集合，常用多個集合數(shù)據(jù)的選擇處理。
如下圖，如果想把頁面中每個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")
選擇器代碼，獲取了兩個<ul>父元素中的第一個<li>元素，并使用
css()
方法修改了它們在頁面中顯示的文字顏色。
將自己的表單元素ID和name命名為了nodeName，在chrome瀏覽器下報錯，結(jié)果發(fā)現(xiàn)是表單元素命名的原因
2014-03-03 
我們要時刻注意瀏覽器緩存, 當(dāng)使用GET方式時要添加時間戳參數(shù) (net Date()).getTime() 來保證每次發(fā)送的URL不同, 可以避免瀏覽器緩存.
2011-04-04 
JQuery Study Notes 學(xué)習(xí)筆記(一)
jquery是當(dāng)前比較流行的js類庫，學(xué)習(xí)它可以實現(xiàn)很多功能。
2010-08-08 
淺談jquery中的each方法$.each、this.each、$.fn.each
下面小編就為大家?guī)硪黄獪\談jquery中的each方法$.each、this.each、$.fn.each。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06 
這篇文章主要介紹了jquery+html5爛漫愛心表白動畫，七夕你表白了嗎，如果還沒有的話，抓緊來學(xué)習(xí)學(xué)習(xí)吧，祝小伙伴們表白成功。
2015-08-08 
jQuery是一個JavaScript庫，它簡化了客戶端JavaScript編程的過程，特別是針對HTML文檔遍歷和操作、事件處理、動畫效果和Ajax操作。感興趣的小伙伴可以參考閱讀
2023-04-04 
jQuery使用CSS()方法給指定元素同時設(shè)置多個樣式
這篇文章主要介紹了jQuery使用CSS()方法給指定元素同時設(shè)置多個樣式的方法,實例分析了jQuery中css方法的使用技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03 
關(guān)于hashchangebroker和statehashable的補充文檔
我覺得之前寫的兩篇隨筆有點不負(fù)責(zé)任，完全沒寫明白，補充了一份文檔（權(quán)且算是文檔吧=.=）
2011-08-08 
本文與大家詳細(xì)探討下用jQuery獲取IE9下拉框默認(rèn)值的問題,如果下拉框沒有空默認(rèn)值會怎么樣等一系列問題，感興趣的朋友可以參考下哈，希望對大家有所幫助
2013-07-07