Rumah > Artikel > hujung hadapan web > jquery如何查找后代元素？jquery获取后代元素方法

jquery如何查找后代元素？jquery获取后代元素方法

云罗郡主asal: 2018-11-03 15:22:538411semak imbas

在上一篇我们讲到jquery获取父元素？相信你已经学会了，那么下面我们来讲一下jquery如何查找后代元素？jquery获取后代元素方法。

一：查找后代元素三种方法

（1）children()；

（2）contents()；

（3）find()；

所谓的后代元素，就是某个元素的“子元素”、“孙元素”……。孙元素，在前端虽然没这个说法，但是却比较形象，所以这一节使用这一个说法。

二：jquery获取后代元素方法

1.children()方法

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

语法：children(expression)

说明：参数expression表示jQuery选择器表达式，用来过滤子元素。当参数省略时，则将选择所有的子元素。如果参数不省略，则表示选择符合条件的子元素。

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".wrapper").hover(function () {
                $(this).children(".test").css("color", "red");
            }, function () {
                $(this).children(".test").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孙元素</li>
            <li class="test">孙元素</li>
            <li>孙元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
    <hr />
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孙元素</li>
            <li class="test">孙元素</li>
            <li>孙元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
</body>
</html>

效果如下：

当我们鼠标移到第1个class为wrapper的div元素上时，在浏览器预览效果如下：

分析：$(this).children(".test")表示选择当前元素下class为test的“子元素”。在这里我们会发现，虽然也有class为test的“孙元素”，但是使用children()方法却不会将“孙元素”选中。

2.contents()方法

与children()方法相似，contents()方法也是用来查找子内容的，但它不仅获取子元素，还可以获取文本节点、注释节点等。因此读者可以把它视为DOM中childNodes属性的jQuery实现。contents()方法很少用，作为初学者我们可以直接忽略这个方法。

我记得在之前不少教程中，对于常见但不常用的一些知识，都会多少提及一下。很多热心的建议说，站长啊，既然这个知识用不到，浪费篇幅，干嘛提及呢？直接删除都行了。其实嘛，道理很简单：学习知识，知道“哪些不用深入学习”，跟“知道哪些需要深入学习”是同等重要的。一来为了方便读者理清思路，二来以后碰到这个知识了，也有那么点印象不至于手忙脚乱。

3.find()方法

find()方法和children()方法相似，都是用来查找所选元素的后代元素，但是find()方法能够查找所有后代元素，而children()方法仅能够查找子元素。

find()方法和children()方法使用频率差不多，同等重要。大家要认真掌握，并且认真区分。

语法：find(expression)

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".wrapper").hover(function () {
                $(this).find(".test").css("color", "red");
            }, function () {
                $(this).find(".test").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孙元素</li>
            <li class="test">孙元素</li>
            <li>孙元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
    <hr />
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孙元素</li>
            <li class="test">孙元素</li>
            <li>孙元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
</body>
</html>

默认情况下，在浏览器预览效果如下：

当我们鼠标移到第1个class为wrapper的div元素上时，在浏览器预览效果如下：

分析：$(this).find(".test")表示选择当前元素下的class为test的所有“后代元素”，既包括子元素，也包括孙元素等所有后代元素。大家将find()方法这个例子跟children()方法那个例子对比一下，就能很直观发现两者之间的不同。

与children()方法相似，contents()方法也是用来查找子内容的，但它不仅获取子元素，还可以获取文本节点、注释节点等。因此读者可以把它视为DOM中childNodes属性的jQuery实现。contents()方法很少用，作为初学者我们可以直接忽略这个方法。如果想要深入学习的话，可以参考：jQuery教程。

Atas ialah kandungan terperinci jquery如何查找后代元素？jquery获取后代元素方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：怎么使用jquery获取父元素？jquery获取父元素方法Artikel seterusnya：JavaScript鼠标事件是什么？JavaScript鼠标事件详解

Artikel berkaitan

Lihat lagi