Web开发——JavaScript库（jQuery遍历——祖先）

　　遍历图解：

1、jQuery 遍历 - 祖先

　　祖先是父、祖父或曾祖父等等。

　　通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

1.1 向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent()：返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。也可以使用可选参数来过滤对祖先元素的搜索。
parentsUntil()：返回介于两个给定元素之间的所有祖先元素。

1.2 举例说明

　　举例1（parent() 方法，下面的例子返回每个 <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                 <!--测试parent()方法-->
15                 $("span").parent().css({"color":"red","border":"2px solid red"});
16             });
17         </script>
18 
19         <style>
20             .ancestors * { 
21                 display: block;
22                 border: 2px solid lightgrey;
23                 color: lightgrey;
24                 padding: 5px;
25                 margin: 15px;
26             }
27             </style>
28         </style>
29     </head>
30     
31     <body>
32     
33         <!--测试parent()方法-->
34         <p>jQuery parent() 方法，parent() 方法返回被选元素的直接父元素。</p>
35         <div class="ancestors">
36             <div style="width:500px;">div (曾祖父)
37                 <ul>ul (祖父)  
38                     <li>li (直接父)
39                         <span>span</span>
40                     </li>
41                 </ul>   
42             </div>
43 
44             <div style="width:500px;">div (祖父)   
45                 <p>p (直接父)
46                     <span>span</span>
47                 </p> 
48             </div>
49         </div>
50 
51     </body>
52 </html>

　　输出结果：

　　举例2（parents() 方法，下面的例子返回所有 <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                 <!--测试parents()方法-->
15                 $("span").parents().css({"color":"red","border":"2px solid red"});
16             });
17         </script>
18 
19         <style>
20             .ancestors * { 
21                 display: block;
22                 border: 2px solid lightgrey;
23                 color: lightgrey;
24                 padding: 5px;
25                 margin: 15px;
26             }
27             </style>
28         </style>
29     </head>
30     
31     <body class="ancestors">body (曾曾祖父)
32         <!--测试parents()方法-->
33         <div style="width:500px;">div (曾祖父)
34             <ul>ul (祖父)  
35                 <li>li (直接父)
36                     <span>span</span>
37                 </li>
38             </ul>
39         </div>
40 
41     </body>
42 </html>

　　输出结果：

　　举例2（parentsUntil() 方法，下面的例子返回所有 <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                 <!--parentsUntil()方法-->
15                 $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
16             });
17         </script>
18 
19         <style>
20             .ancestors * { 
21                 display: block;
22                 border: 2px solid lightgrey;
23                 color: lightgrey;
24                 padding: 5px;
25                 margin: 15px;
26             }
27             </style>
28         </style>
29     </head>
30     
31     <body class="ancestors">body (曾曾祖父)
32         <!--parentsUntil()方法-->
33         <div style="width:500px;">div (曾祖父)
34             <ul>ul (祖父)  
35                 <li>li (直接父)
36                     <span>span</span>
37                 </li>
38             </ul>
39         </div>
40 
41     </body>
42 </html>

　　输出结果：

2、jQuery 遍历参考手册

　　如需了解所有的 jQuery 遍历方法，请访问 jQuery 遍历参考手册。

Web开发——JavaScript库（jQuery遍历——祖先）

1、jQuery 遍历 - 祖先

1.1 向上遍历 DOM 树

1.2 举例说明

2、jQuery 遍历参考手册

猜你喜欢