jQuery篩選器children()詳解

阿新 • • 發佈：2019-01-20

jQuery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對選擇器選定的jQuery物件做進一步選擇。 children()是一個篩選器，顧名思義就是篩選孩子，篩選那些符合條件的孩子。完整的格式如下： .children(expr) 其中children是篩選器的名稱，expr是表示式，所有選擇器中的表示式都可以用在這，比如按標籤名"div",按類名".class",按序號":first"等等，如果表示式為空，那麼返回的是所有的孩子，返回的結果仍為jQuery物件。例如：

<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");//所有的文字都變成了紅色

需求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篩選器篩選出來的孩子是在一塊排序的，所以“熱門推薦”的第二行就變成了老7，要想變紅可以這麼寫：

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

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

jQuery篩選器children()詳解

jQuery筆記-jQuery篩選器children()詳解

jQuery篩選器children()詳解

jQuery選擇器程式碼詳解（三）——tokenize方法

jQuery類css選擇器程式碼詳解

Jmeter中正則表達式提取器使用詳解

系統批量運維管理器Fabric詳解

js 定時器用法詳解——setTimeout()、setInterval()、clearTimeout()、clearInterval()

jQuery.extend 函數詳解

Git服務器安裝詳解及安裝遇到問題解決方案【轉】

jQuery Validate驗證框架詳解

代碼收藏系列--jquery--篩選器、事件綁定技巧

jQuery篩選器

Jquery之事件委派詳解

Tomcat服務器原理詳解

nfs文件共享服務器搭建詳解

搜索引擎系列八：solr-部署詳解（solr兩種部署模式介紹、獨立服務器模式詳解、SolrCloud分布式集群模式詳解）

系統批量運維管理器pexpect詳解

系統批量運維管理器paramiko詳解

UNIX網絡編程入門——TCP客戶/服務器程序詳解

Rsync同步服務器配置詳解

jQuery篩選器children()詳解

相關推薦