快捷導(dǎo)航

jQuery篩選器children()案例詳解(圖文)

更新時(shí)間：2013年02月17日 18:27:57 作者：

jQuery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對(duì)選擇器選定的jQuery對(duì)象做進(jìn)一步選擇;記下來(lái)將詳細(xì)介紹下篩選器children()感興趣的你可不要錯(cuò)過(guò)了哈，或許本文的知識(shí)點(diǎn)對(duì)你有所幫助

jQuery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對(duì)選擇器選定的jQuery對(duì)象做進(jìn)一步選擇。

children()是一個(gè)篩選器，顧名思義就是篩選孩子，篩選那些符合條件的孩子。

完整的格式如下：

復(fù)制代碼代碼如下:

.children(expr)

其中children是篩選器的名稱(chēng)，expr是表達(dá)式，所有選擇器中的表達(dá)式都可以用在這，比如按標(biāo)簽名"div",按類(lèi)名".class",按序號(hào)":first"等等，如果表達(dá)式為空，那么返回的是所有的孩子，返回的結(jié)果仍為jQuery對(duì)象。例如：

復(fù)制代碼代碼如下:

<body> 
<div id="main"> 
<div id="like" class="rightbar"> 
<h2>猜你喜歡</h2> 
<ul> 
<li>海飛絲洗頭膏</li> 
<li>六神花露水</li> 
<li>舒膚佳香皂</li> 
<li>心相印紙巾</li> 
<li>哇哈哈礦泉水</li> 
<li>王老吉</li> 
</ul> 
</div> 
<div id="hot" class="rightbar"> 
<h2>熱門(mén)推薦</h2> 
<ul> 
<li>融氏橄欖油</li> 
<li>幫寶適紙尿褲</li> 
<li>有機(jī)大米</li> 
<li>妙潔垃圾袋</li> 
<li>優(yōu)樂(lè)美奶茶</li> 
<li>親親果凍</li> 
</ul> 
</div> 
<div id="inner"></div> 
</div> 
</body>

復(fù)制代碼代碼如下:

<script type="text/javascript" language="javascript"> 
//此處為jQuery代碼 
</script>

需求1：把所有div的孩子的字體顏色變?yōu)榧t色

復(fù)制代碼代碼如下:

$("div").children().css("color","red");//所有的文字都變成了紅色

需求2：把所有的div的孩子中是h2標(biāo)簽的字體顏色變?yōu)榧t色

復(fù)制代碼代碼如下:

$("div").children("h2").css("color","red");//所有h2標(biāo)題的文字都變成了紅色

需求3：把所有div的孩子中是li標(biāo)簽的字體顏色變?yōu)榧t色

復(fù)制代碼代碼如下:

$("div").children("li").css("color","red");//失??！

為什么不成功呢？因?yàn)閏hildren只能找孩子，找不到孫子輩的，而div的孩子是h2和ul，所以找不到li；

那么要想通過(guò)children找到li，只有先選定li的父親ul

復(fù)制代碼代碼如下:

$("div ul").children("li").css("color","red");//所有l(wèi)i的文字都變成了紅色

$("div ul")是一個(gè)聯(lián)級(jí)選擇器，意思是選擇div下面的ul，這里不詳細(xì)解釋。

需求4：把ul的第二個(gè)孩子的字體顏色變?yōu)榧t色

復(fù)制代碼代碼如下:

$("div ul").children(":eq(1)").css("color","red");//猜你喜歡的第二行“六神花露水”會(huì)變紅

要第二個(gè)孩子變紅，為什么是eq(1)呢？因?yàn)轫樞蛱?hào)是從0開(kāi)始的，第一個(gè)孩子的序號(hào)是0，所以第二個(gè)孩子的序號(hào)就是1咯。

細(xì)一看發(fā)現(xiàn)只有“猜你喜歡”模塊的第二行變了，“熱門(mén)推薦”的第二行沒(méi)變，為什么呢？因?yàn)閏hildren篩選器篩選出來(lái)的孩子是在一塊排序的，所以“熱門(mén)推薦”的第二行就變成了老7，要想變紅可以這么寫(xiě)：

復(fù)制代碼代碼如下:

$("div ul").children(":eq(1),:eq(7)").css("color","red");//猜你喜歡的第二行，熱門(mén)推薦的第二行都變紅

二行都變紅]

總結(jié)一下：children是一個(gè)篩選器，找到當(dāng)前jQuery對(duì)象的孩子，children(expr)中的expr是表達(dá)式，加了expr之后符合expr的孩子才會(huì)留下來(lái)，不符合的就干掉了。children只能找孩子，要想找孫子輩的、重孫子輩的，那就得用 find 篩選器。

您可能感興趣的文章: