jQuery遍历(1)

  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>
posted @ 2019-08-12 08:04 码农下的天空 阅读(...) 评论(...) 编辑 收藏
点击这里给我发消息
在线沟通 返回顶部
欢迎关注公众号

惊风随笔