首页 > 编程笔记 > Web笔记 > jQuery过滤和查找

jQuery children() find()和contents()方法

在 jQuery 中,如果想要查找当前元素的后代元素(子元素、孙元素等),我们有以下 3 种方法。
下面我们来一一介绍。

jQuery children()方法

在 jQuery 中,我们可以使用 children() 方法来查找当前元素的“子元素”。注意,children() 方法只能查找子元素,不能查找其他后代元素。

语法:

$().children(selector)

selector 是一个选择器,用来查找符合条件的子元素。selector 是一个可选参数,当参数省略时,表示选择所有子元素;当参数没有省略时,表示选择符合条件的子元素。

举例:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style lang="">
        p{margin:6px 0;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#wrapper").hover(function(){
                $(this).children(".select").css("color", "red");
            },function(){
                $(this).children(".select").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div id="wrapper">
        <p>子元素</p>
        <p class="select">子元素</p>
        <div>
            <p>孙元素</p>
            <p class="select">孙元素</p>
        </div>
        <p>子元素</p>
        <p class="select">子元素</p>
    </div>
</body>
</html>
默认情况下,预览效果如图 1 所示。
默认效果
图 1:默认效果

当鼠标指针移到 id="wrapper" 的 div 元素上时,预览效果如图 2 所示。
鼠标指针移到id="wrapper"的div元素上时的效果
图 2:鼠标指针移到 id="wrapper" 的 div 元素上时的效果

$(this).children(".select")表示获取当前元素下的 class="select" 的子元素。我们可以发现,class="select" 的孙元素不会被选中。

jQuery find()方法

在 jQuery 中,我们可以使用 find() 方法来查找当前元素的“后代元素”。注意,find() 方法不仅能查找子元素,还能查找其他后代元素。

语法:

$().find(selector)

selector 是一个可选参数,也是一个选择器,用来查找符合条件的后代元素。当参数省略时,表示选择所有后代元素;当参数没有省略时,表示选择符合条件的后代元素。

举例:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style lang="">
        p{margin:6px 0;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#wrapper").hover(function(){
                $(this).find(".select").css("color", "red");
            },function(){
                $(this).find(".select").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div id="wrapper">
        <p>子元素</p>
        <p class="select">子元素</p>
        <div>
            <p>孙元素</p>
            <p class="select">孙元素</p>
        </div>
        <p>子元素</p>
        <p class="select">子元素</p>
    </div>
</body>
</html>
默认情况下,预览效果如图 3 所示。
默认效果
图 3:默认效果

当鼠标指针移到 id="wrapper" 的 div 元素上时,预览效果如图 4 所示。
鼠标指针移到id="wrapper"的div元素上时的效果
图 4:鼠标指针移到 id="wrapper" 的 div 元素上时的效果

$(this).find(".select")表示不仅会选取当前元素下的 class="select" 的子元素,还会选取 class="select" 的孙元素。

jQuery contents()方法

在 jQuery 中,我们可以使用 contents() 方法来获取子元素及其内部文本。contents() 方法和 children() 方法相似,不同的是,contents() 返回的 jQuery 对象中不仅包含子元素,还包含文本内容;而 children() 方法返回的 jQuery 对象中只会包含子元素,不包含文本内容。

在实际开发中,我们极少会用到 contents() 方法,因此小伙伴们不需要深入了解,在这里简单认识一下即可。

所有教程

优秀文章