jQuery遍历(1)
程序员文章站
2022-05-15 15:14:38
jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。 ......
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>
上一篇： asp.net(C#)常用时间日期处理类
下一篇： 跳出大数据分析误区