jquery查找后代元素 children() contents() find()

jquery查找后代元素 children() contents()  find()

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

一、children()方法

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

<script type="text/javascript">

        $(function () {

            $(".wrapper").hover(function () {

                $(this).children(".test").text("www.nanaopearl.com");

            }, function () {

                $(this).children(".test").text("www.nanaopearl.com");

            })

        })

    </script>

 

二、contents()方法

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

三、find()方法

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

<script type="text/javascript">

        $(function () {

            $(".wrapper").hover(function () {

                $(this).find(".test").text("www.nanaopearl.com");

            }, function () {

                $(this).find(".test").text("www.nanaopearl.com");

            })

        })

    </script>