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:
When our mouse moves to the first div element with class wrapper When uploaded, the preview effect in the browser is as follows:
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)
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).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:
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:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
