亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

jQuery遍歷之children()方法

jQuery是一個(gè)合集對(duì)象,如果想快速查找合集里面的第一級(jí)子元素,此時(shí)可以用children()方法。

這里需要注意:.children(selector) 方法是返回匹配元素集合中每個(gè)元素的所有子元素(僅兒子輩,這里可以理解為就是父親-兒子的關(guān)系)

理解節(jié)點(diǎn)查找關(guān)系:

    <div class="div">
           <ul class="son">
               <li class="grandson">1</li>
           </ul>
    </div>

如上代碼:如果是$("div").children(),那么意味著只能找到ul,因?yàn)閐iv與ul是父子關(guān)系,li與div是祖輩關(guān)系,因此無(wú)法找到。

children()無(wú)參數(shù)

允許我們通過(guò)在DOM樹(shù)中對(duì)這些元素的直接子元素進(jìn)行搜索,并且構(gòu)造一個(gè)新的匹配元素的jQuery對(duì)象

        注意:jQuery是一個(gè)合集對(duì)象,所以通過(guò)children是匹配合集中每一給元素的第一級(jí)子元素

children()方法選擇性地接受同一類(lèi)型選擇器表達(dá)式

    $("div").children(".selected")

同樣的也是因?yàn)閖Query是合集對(duì)象,可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選,找出目標(biāo)元素,所以允許傳一個(gè)選擇器的表達(dá)式

下面我們來(lái)寫(xiě)一段實(shí)例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>childred()</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>
        <ul>
            <li>php.cn</li>
            <li>php 中文網(wǎng)</li>
        </ul>

        <p>  php </p>
    </div>


    <script>
        $("div").children().css("color", "red");
    </script>
</body>
</html>

如上代碼,當(dāng)我們寫(xiě)上 $("div").children().css("color", "red"); 他就會(huì)去找div 下面的子元素,所以div 中的元素都會(huì)變成紅色,下面我們來(lái)看另外一種

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>childred()</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>
        <ul>
            <li>php.cn</li>
            <li>php 中文網(wǎng)</li>
        </ul>

        <p>  php </p>
    </div>


    <script>
        $("div").children(':first').css("color", "red");
    </script>
</body>
</html>

如上代碼,我們會(huì)看到p標(biāo)簽內(nèi)的元素的顏色沒(méi)有發(fā)生變化,因?yàn)槲覀僣hildren() 中有一個(gè)參數(shù),first 第一個(gè),所以會(huì)去找div 中的第一個(gè)子元素

可以看出<ul>是我們div 的第一個(gè)元素,所以 li 標(biāo)簽內(nèi)的元素會(huì)發(fā)生變化,大家可以在本地寫(xiě)一段代碼試試

Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>childred()</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div> <ul> <li>php.cn</li> <li>php 中文網(wǎng)</li> </ul> <p> php </p> </div> <script> $("div").children().css("color", "red"); </script> </body> </html>
einreichenCode zurücksetzen