遍历图解：
1、jQuery 遍历 - 后代
后代是子、孙、曾孙等等。
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
1.1 向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
- children()：返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
- find()：返回被选元素的后代元素，一路向下直到最后一个后代。
1.2 举例说明
举例1（children() 方法，下面的例子返回每个 <div> 元素的所有直接子元素）：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!--<meta charset="utf-8">-->
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 <meta http-equiv="Content-Language" content="zh-cn" />
7 <title>My test page</title>
8
9 <!--引用jQuery库，src可以直接指向本地下载的jQery库-->
10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11 <script src="jquery-3.3.1.js"></script>
12 <script type="text/javascript">
13 $(document).ready(function() {
14 $("div").children().css({"color":"red","border":"2px solid red"});
15 });
16 </script>
17
18 <style>
19 .descendants * {
20 display: block;
21 border: 2px solid lightgrey;
22 color: lightgrey;
23 padding: 5px;
24 margin: 15px;
25 }
26
27 </style>
28 </head>
29
30 <body>
31 <div class="descendants" style="width:500px;">div (当前元素)
32 <p>p (子)
33 <span>span (孙)</span>
34 </p>
35 <p>p (child)
36 <span>span (孙)</span>
37 </p>
38 </div>
39
40 </body>
41 </html>
输出结果：
举例2（children() 方法，您也可以使用可选参数来过滤对子元素的搜索。下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素）：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!--<meta charset="utf-8">-->
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 <meta http-equiv="Content-Language" content="zh-cn" />
7 <title>My test page</title>
8
9 <!--引用jQuery库，src可以直接指向本地下载的jQery库-->
10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11 <script src="jquery-3.3.1.js"></script>
12 <script type="text/javascript">
13 $(document).ready(function() {
14 $("div").children(p.1).css({"color":"red","border":"2px solid red"});
15 });
16 </script>
17
18 <style>
19 .descendants * {
20 display: block;
21 border: 2px solid lightgrey;
22 color: lightgrey;
23 padding: 5px;
24 margin: 15px;
25 }
26
27 </style>
28 </head>
29
30 <body>
31 <div class="descendants" style="width:500px;">div (当前元素)
32 <p class="1">p (子)
33 <span>span (孙)</span>
34 </p>
35 <p class="2">p (child)
36 <span>span (孙)</span>
37 </p>
38 </div>
39
40 </body>
41 </html>
输出结果：
举例3（find() 方法，下面的例子返回属于 <div> 后代的所有 <span> 元素）：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!--<meta charset="utf-8">-->
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 <meta http-equiv="Content-Language" content="zh-cn" />
7 <title>My test page</title>
8
9 <!--引用jQuery库，src可以直接指向本地下载的jQery库-->
10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11 <script src="jquery-3.3.1.js"></script>
12 <script type="text/javascript">
13 $(document).ready(function() {
14 $("div").find("span").css({"color":"red","border":"2px solid red"});
15 });
16 </script>
17
18 <style>
19 .descendants * {
20 display: block;
21 border: 2px solid lightgrey;
22 color: lightgrey;
23 padding: 5px;
24 margin: 15px;
25 }
26
27 </style>
28 </head>
29
30 <body>
31 <div class="descendants" style="width:500px;">div (当前元素)
32 <p class="1">p (子)
33 <span>span (孙)</span>
34 </p>
35 <p class="2">p (child)
36 <span>span (孙)</span>
37 </p>
38 </div>
39
40 </body>
41 </html>
输出结果：
举例4（find() 方法，下面的例子返回属于 <div> 后代的所有后代）：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!--<meta charset="utf-8">-->
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 <meta http-equiv="Content-Language" content="zh-cn" />
7 <title>My test page</title>
8
9 <!--引用jQuery库，src可以直接指向本地下载的jQery库-->
10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11 <script src="jquery-3.3.1.js"></script>
12 <script type="text/javascript">
13 $(document).ready(function() {
14 $("div").find("*").css({"color":"red","border":"2px solid red"});
15 });
16 </script>
17
18 <style>
19 .descendants * {
20 display: block;
21 border: 2px solid lightgrey;
22 color: lightgrey;
23 padding: 5px;
24 margin: 15px;
25 }
26
27 </style>
28 </head>
29
30 <body>
31 <div class="descendants" style="width:500px;">div (当前元素)
32 <p class="1">p (子)
33 <span>span (孙)</span>
34 </p>
35 <p class="2">p (child)
36 <span>span (孙)</span>
37 </p>
38 </div>
39
40 </body>
41 </html>
输出结果：
2、jQuery 遍历参考手册
如需了解所有的 jQuery 遍历方法，请访问我们的 jQuery 遍历参考手册。
原文地址：https://www.cnblogs.com/zyjhandsome/p/9792437.html
时间： 2024-11-06 14:49:09