jQuery遍历之children()方法

jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法。

这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系)

理解节点查找关系:

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

如上代码:如果是$("div").children(),那么意味着只能找到ul,因为div与ul是父子关系,li与div是祖辈关系,因此无法找到。

children()无参数

允许我们通过在DOM树中对这些元素的直接子元素进行搜索,并且构造一个新的匹配元素的jQuery对象

        注意:jQuery是一个合集对象,所以通过children是匹配合集中每一给元素的第一级子元素

children()方法选择性地接受同一类型选择器表达式

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

同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

下面我们来写一段实例:

<!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 中文网</li>
        </ul>

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


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

如上代码,当我们写上 $("div").children().css("color", "red"); 他就会去找div 下面的子元素,所以div 中的元素都会变成红色,下面我们来看另外一种

<!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 中文网</li>
        </ul>

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


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

如上代码,我们会看到p标签内的元素的颜色没有发生变化,因为我们children() 中有一个参数,first 第一个,所以会去找div 中的第一个子元素

可以看出<ul>是我们div 的第一个元素,所以 li 标签内的元素会发生变化,大家可以在本地写一段代码试试

继续学习
||
<!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 中文网</li> </ul> <p> php </p> </div> <script> $("div").children().css("color", "red"); </script> </body> </html>
提交重置代码