jQuery遍历(1)

最新推荐文章于 2022-11-04 12:05:29 发布

Python之眼

最新推荐文章于 2022-11-04 12:05:29 发布

阅读量118

点赞数

分类专栏： JQuery 文章标签：程序员新手入门

本文链接：https://blog.csdn.net/weixin_42625143/article/details/99297840

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

--------------------------------------------------------------------
注：如果你对python感兴趣，我这有个学习Python基地，里面有很多学习资料，感兴趣的+Q群：895817687
--------------------------------------------------------------------
 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>

Python之眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery遍历(1)

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。图示解释：　　举例：jQuery parent() 方法parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。1 <!DOCTYPE html> 2 <html> ...
复制链接

扫一扫

专栏目录