jQuery筆記-jQuery篩選器children()詳解
阿新 • • 發佈：2018-08-21
選擇 jquery篩選 標簽 其中 toolbar ima 成了 query ava
jQuery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對選擇器選定的jQuery對象做進一步選擇。children()是一個篩選器，顧名思義就是篩選孩子，篩選那些符合條件的孩子。完整的格式如下： .children(expr) 其中children是篩選器的名稱，expr是表達式，所有選擇器中的表達式都可以用在這，比如按標簽名"div",按類名".class",按序號":first"等等，如果表達式為空，那麽返回的是所有的孩子，返回的結果仍為jQuery對象。例如：
需求4：把ul的第二個孩子的字體顏色變為紅色
<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>熱門推薦</h2> <ul> <li>融氏橄欖油</li> <li>幫寶適紙尿褲</li> <li>有機大米</li> <li>妙潔垃圾袋</li> <li>優樂美奶茶</li> <li>親親果凍</li> </ul> </div> <div id="inner"></div> </div> </body>
1 <script type="text/javascript" language="javascript"> 2 //此處為jQuery代碼 3 </script>
需求1：把所有div的孩子的字體顏色變為紅色
$("div").children().css("color","red");//所有的文字都變成了紅色
$("div").children("h2").css("color","red");//所有h2標題的文字都變成了紅色
$("div").children("li").css("color","red");//失敗！
$("div ul").children("li").css("color","red");//所有li的文字都變成了紅色$("div ul")是一個聯級選擇器，意思是選擇div下面的ul，這裏不詳細解釋。
需求4：把ul的第二個孩子的字體顏色變為紅色$("div ul").children(":eq(1)").css("color","red");//猜你喜歡的第二行“六神花露水”會變紅
$("div ul").children(":eq(1),:eq(7)").css("color","red");//猜你喜歡的第二行，熱門推薦的第二行都變紅
jQuery筆記-jQuery篩選器children()詳解