jQuery遍历(1)

来源：cnblogs　　作者：码农下的天空　　时间：2019/8/15 12:12:28　　对本文有异议

　　jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

　　图示解释：

　　举例：

　　jQuery parent() 方法

　　parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .ancestors *{ 
 7     display: block;
 8     border: 2px solid lightgrey;
 9     color: lightgrey;
10     padding: 5px;
11     margin: 15px;
12 }
13 </style>
14 <script src="jquery-1.12.0.min.js">
15    </script>
16     <script>
17     $(document).ready(function(){
18        $("li").parent().css({
19                "color":"red",
20                 "border":"1px solid green"
21        })
22     });
23     </script>
24 </head>
25 <body>
26 
27 <div class="ancestors">
28   <div style="width:500px;">div (曾祖父元素)
29     <ul>ul (祖父元素,li的父元素)  
30       <li>li (父元素)
31         <span>span</span>
32       </li>
33     </ul>   
34     </div>
35 
36     <div style="width:500px;">div (祖父元素)   
37     <p>p (父元素)
38          <span>span</span>
39       </p> 
40   </div>
41 </div>
42 </body>
43 </html>

　　jQuery parents() 方法

　　parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .ancestors *
 7 { 
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15 <script src="jquery-1.12.0.min.js">
16    </script>
17     <script>
18     $(document).ready(function(){
19        $("li").parents('div').css({
20                "color":"red",
21                 "border":"1px solid green"
22        })
23     });
24     </script>
25 </head>
26 <body>
27 
28 <div class="ancestors">
29   <div style="width:500px;">div (曾祖父元素)
30     <ul>ul (祖父元素,li的父元素)  
31       <li>li (父元素)
32         <span>span</span>
33       </li>
34     </ul>   
35     </div>
36 
37     <div style="width:500px;">div (祖父元素)   
38     <p>p (父元素)
39          <span>span</span>
40       </p> 
41   </div>
42 </div>
43 </body>
44 </html>

　　jQuery parentsUntil() 方法

　　parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .ancestors *
 7 { 
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15 <script>
16         $(document).ready(function(){
17           $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
18         });
19 </script>
20 </head>
21 <body class="ancestors"> body (曾曾祖父元素)
22   <div style="width:500px;">div (曾祖父元素)
23     <ul>ul (祖父元素)  
24       <li>li (父元素)
25         <span>span</span>
26       </li>
27     </ul>   
28   </div>
29 </body>
30 </html>

　　jQuery children() 方法

　　children() 方法返回被选元素的所有直接子元素。

　　该方法只会向下一级对 DOM 树进行遍历。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .ancestors *
 7 { 
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15   <script src="jquery-1.12.0.min.js"></script>
16 <script>
17         $(document).ready(function(){
18           $("li").children().css({"color":"red","border":"2px solid red"});
19         });
20 </script>
21 </head>
22 <body class="ancestors"> body (曾曾祖父元素)
23   <div style="width:500px;">div (曾祖父元素)
24     <ul>ul (祖父元素)  
25       <li>li (父元素)
26         <span>span</span>
27       </li>
28     </ul>   
29   </div>
30 </body>
31 </html>

　　Query find() 方法

　　find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
  <script src="jquery-1.12.0.min.js"></script>
<script>
        $(document).ready(function(){
          $("div").find('li').css({"color":"red","border":"2px solid red"});
        });
</script>
</head>
<body class="ancestors"> body (曾曾祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>
</html>

原文链接：http://www.cnblogs.com/songtianfa/p/11328331.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章