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

--------------------------------------------------------------------
注：如果你对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>

jQuery遍历(1)相关推荐

jquery遍历json与数组方法总结each()
在jquery中遍历数组或json数组我们使用最多的方法是each这个函数了或使用foreach,for也是可以实现的,下面我来给大家详细介绍jquery遍历json与数组实现. 代码如下复制代码先 ...
jQuery遍历之next()、nextAll()方法使用实例
jquery遍历:next()和nextAll()方法.实例如下: 复制代码代码如下: <html> <head> <script type="text/ja ...
jquery遍历集合数组标签
jquery遍历集合&数组的两种方式 CreateTime--2017年4月24日08:31:49 Author:Marydon 方法一: $(function(){$("input ...
jQuery 遍历 - closest() 方法
jQuery 遍历参考手册实例本例演示如何通过 closest() 完成事件委托.当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景: $( document ).bind("c ...
jQuery 遍历 (each、map)
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止 ...
jQuery 遍历方法
jQuery 遍历方法方法描述 add() 把元素添加到匹配元素的集合中 addBack() 把之前的元素集添加到当前集合中 andSelf() 在版本 1.8 中被废弃.addBack() 的别 ...
jQuery遍历，数组，集合
使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...
JQuery：JQuery遍历详解
JQuery:遍历一.什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着 ...
php父子遍历,jQuery 遍历
jQuery 遍历 parent() 方法实例查找每个段落的带有 "selected" 类的父元素: $("p").parent(".select ...

jQuery遍历(1)

jQuery遍历(1)相关推荐

最新文章

热门文章