解讀jQuery篩選器children

一篇不錯的詳細教程，解讀jquery篩選器children()

jquery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對選擇器選定的jquery物件做進一步選擇。

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

完整的格式如下：

.children(expr)

其中children是篩選器的名稱，expr是表示式，所有選擇器中的表示式都可以用在這，比如按標籤名"div",按類名".class",按序號":first"等等，如果表示式為空，那麼返回的是所有的孩子，返回的結果仍為jquery物件。例如：

需求1：把所有div的孩子的字型顏色變為紅色

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

需求2：把所有的div的孩子中是h2標籤的字型顏色變為紅色

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

需求3：把所有div的孩子中是li標籤的字型顏色變為紅色

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

為什麼不成功呢？因為children只能找孩子，找不到孫子輩的，而div的孩子是h2和ul，所以找不到li；

那麼要想通過children找到li，只有先選定li的父親ul

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

$("div ul")是乙個聯級選擇器，意思是選擇div下面的ul，這裡不詳細解釋。

需求4：把ul的第二個孩子的字型顏色變為紅色

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

要第二個孩子變紅，為什麼是eq(1)呢？因為順序號是從0開始的，第乙個孩子的序號是0，所以第二個孩子的序號就是1咯。

總結一下：children是乙個篩選器，找到當前jquery物件的孩子，children(expr)中的expr是表示式，加了expr之後符合expr的孩子才會留下來，不符合的就乾掉了。children只能找孩子，要想找孫子輩的、重孫子輩的，那就得用 find 篩選器。