How to find descendant elements in jquery? jquery method to get descendant elements-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to find descendant elements in jquery? jquery method to get descendant elements

云罗郡主

Nov 03, 2018 pm 03:22 PM

In the previous article we talked aboutjquery to get the parent element? I believe you have learned it, so let's talk about how to find descendant elements in jquery? jquery method to get descendant elements.

1: Three methods to find descendant elements

（1）children()；

（2）contents()；

(3)find();

The so-called descendant elements are the "child elements" and "grandchildren" of a certain element... Sun Yuan Yuan, although there is no such term in the front-end, it is more vivid, so this term is used in this section.

2: jquery method to get descendant elements

1.children() method

In jQuery, we can use The children() method finds "all child elements" or "some child elements" of the current element. Note that the children() method can only find child elements, not other descendant elements.

Syntax: children(expression)

Description: The parameter expression represents the jQuery selector expression, used to filter child elements. When the argument is omitted, all child elements will be selected. If the parameter is not omitted, it means that the child elements that meet the conditions are selected.

Example:

<!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>

The effect is as follows:

How to find descendant elements in jquery? jquery method to get descendant elements

When our mouse moves to the first div element with class wrapper When uploaded, the preview effect in the browser is as follows:

How to find descendant elements in jquery? jquery method to get descendant elements

Analysis: $(this).children(".test") means selecting the "child with class test" under the current element. element". Here we will find that although there are "grandchildren" with class test, the "grandchildren" will not be selected using the children() method.

2.contents() method

Similar to the children() method, the contents() method is also used to find child content, but it not only obtains child elements, You can also get text nodes, comment nodes, etc. So readers can think of it as the jQuery implementation of the childNodes attribute in the DOM. The contents() method is rarely used. As beginners, we can simply ignore this method.

I remember that in many previous tutorials, some common but not commonly used knowledge was mentioned more or less. Many enthusiastic suggestions said, webmaster, since this knowledge is not used and it is a waste of space, why mention it? Just delete it directly. In fact, the reason is very simple: learning knowledge and knowing "what does not need to be studied in depth" is equally important as "knowing what needs to be studied in depth". Firstly, it is to make it easier for readers to clarify their thoughts, and secondly, when encountering this knowledge in the future, it will have some impression so that they will not be in a hurry.

3.find() method

The find() method is similar to the children() method. They are both used to find descendant elements of the selected element, but find() ) method can find all descendant elements, while the children() method can only find child elements.

The find() method and the children() method are used almost as frequently and are equally important. Everyone should master it carefully and distinguish it carefully.

Syntax: find(expression)

Example:

<!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>

By default, the preview effect in the browser is as follows:

How to find descendant elements in jquery? jquery method to get descendant elements

When we move the mouse to the first class When it is on the div element of the wrapper, the browser preview effect is as follows:

How to find descendant elements in jquery? jquery method to get descendant elements

Analysis: $(this).find(".test") means selecting under the current element All "descendant elements" whose class is test include both child elements and all descendant elements such as grandchild elements. If you compare the example of the find() method with the example of the children() method, you can intuitively find the difference between the two.

Similar to the children() method, the contents() method is also used to find child content, but it not only gets child elements, but also text nodes, comment nodes, etc. So readers can think of it as the jQuery implementation of the childNodes attribute in the DOM. The contents() method is rarely used. As beginners, we can simply ignore this method. If you want to learn more, you can refer to: jQuery Tutorial.

The above is the detailed content of How to find descendant elements in jquery? jquery method to get descendant elements. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AM

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

10 Mobile Cheat Sheets for Mobile DevelopmentMar 05, 2025 am 12:43 AM

This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig

Improve Your jQuery Knowledge with the Source ViewerMar 05, 2025 am 12:54 AM

jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI

10 jQuery Fun and Games PluginsMar 08, 2025 am 12:42 AM

10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game

How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

jQuery Parallax Tutorial - Animated Header BackgroundMar 08, 2025 am 12:39 AM

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the

See all articles