zoukankan html css js c++ java

JQuery的遍历

1.JQuery的遍历

1.什么叫遍历

遍历即为“移动”，具体的意思是从某一位置开始，到达另一个位置

2.遍历——祖先

1.祖先是父，祖父这些。通过DOM，你可以向上遍历。

2.向上遍历的方法：

parent（）
parents（）
parentUntil（）

3.parent（）实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(function(){
 9     $(".b1").click(function(){
10         $("p").parent().css({"border":"solid 2px red"});
11     });
12 
13 });
14 </script>
15 
16 <style type="text/css">
17 .parent *{
18     display: block;
19     border: solid 1px lightgrey;
20     padding: 5px;
21     margin:10px;
22 
23 }
24 </style>
25 
26 </head>
27 <body>
28 <div class="parent">曾祖父元素
29 <ul>祖父元素
30     <li>父元素
31         <p>本元素
32             <span>
33                 子元素
34             </span>
35         </p>
36     </li>
37 </ul>
38  </div>
39 
40 <button class="b1" >点击之后，显示parent（）父元素遍历</button>
41 
42 </body>
43 </html>

4.parents（）实例 parents（）方法遍历所有的父元素指导根元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(function(){
 9     $(".b1").click(function(){
10         $("p").parents().css({"border":"solid 2px red"});
11     });
12 
13 });
14 </script>
15 
16 <style type="text/css">
17 .parent *{
18     display: block;
19     border: solid 1px lightgrey;
20     padding: 5px;
21     margin:10px;
22 
23 }
24 </style>
25 
26 </head>
27 <body>
28 <div class="parent">曾祖父元素
29 <ul>祖父元素
30     <li>父元素
31         <p>本元素
32             <span>
33                 子元素
34             </span>
35         </p>
36     </li>
37 </ul>
38  </div>
39 
40 <button class="b1" >点击之后，显示parents（）父元素遍历</button>
41 
42 </body>
43 </html>

parents（）里面可以设置参数,例如parents（“ul”），意思就是遍历所有父元素，且父元素是ul的。

5.parentsUntil（）返回两者之间的父元素，但不包含这两个元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(function(){
 9     $(".b1").click(function(){
10         $("p").parentsUntil("div").css({"border":"solid 2px red"});           //介于两者之间，但是不包括选定的两个元素
11     });
12 
13 });
14 </script>
15 
16 <style type="text/css">
17 .parent *{
18     display: block;
19     border: solid 1px lightgrey;
20     padding: 5px;
21     margin:10px;
22 
23 }
24 </style>
25 
26 </head>
27 <body>
28 <div class="parent">曾祖父元素
29 <ul>祖父元素
30     <li>父元素
31         <p>本元素
32             <span>
33                 子元素
34             </span>
35         </p>
36     </li>
37 </ul>
38  </div>
39 
40 <button class="b1" >点击之后，显示parentsUntil（）父元素遍历</button>
41 
42 </body>
43 </html>

3.遍历后代

1.遍历后代就是子，孙，曾孙

2.遍历后代的方法

children（）
find（）

3.children（）返回直接的子元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(function(){
 9     $(".b1").click(function(){
10         $("p").children().css({"border":"solid 2px red"});           
11     });
12 
13 });
14 </script>
15 
16 <style type="text/css">
17 .parent *{
18     display: block;
19     border: solid 1px lightgrey;
20     padding: 5px;
21     margin:10px;
22 
23 }
24 </style>
25 
26 </head>
27 <body>
28 <div class="parent">曾祖父元素
29 <ul>祖父元素
30     <li>父元素
31         <p>本元素
32             <span>
33                 子元素
34             </span>
35         </p>
36     </li>
37 </ul>
38  </div>
39 
40 <button class="b1" >点击之后，显示children（）子元素遍历</button>
41 
42 </body>
43 </html>

选择性遍历后代

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .descendants *
 7 { 
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19   $("div").children("p.1").css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 <body>
24 
25 <div class="descendants" style="500px;">div (当前元素) 
26   <p class="1">p (儿子元素)
27     <span>span (孙子元素)</span>     
28   </p>
29   <p class="2">p (儿子元素)
30     <span>span (孙子元素)</span>
31   </p> 
32 </div>
33 
34 </body>
35 </html>

4.find（）方法，也是带有参数的可选择遍历后代。

find（“spn”）是指，从遍历本元素的子元素中为span的。

find（“*”）是指，遍历本元素的所有子元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});        //find()方法是有参数的
}); 
</script>
</head>
<body>

<div class="descendants" style="500px;">div (当前元素) 
  <p class="1">p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p class="2">p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

4.遍历同胞

遍历同胞的方法

siblings（）
next（）
nextUntil（）
nextAll（）
prev（）
prevAll（）
prevUntil（）

1.siblings（）返回所有的同胞

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").siblings().css({"color":"red","border":"2px solid red"});        //siblings()方法是返回所有的同胞
}); 
</script>
</head>
<body>

<div class="descendants" style="500px;">div (当前元素) 
  <p >p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p >p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

siblings（）含有参数

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .descendants *                                        //这种选择器是指类.descendants之后所有的元素执行这样的css样式
 7 { 
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19   $("p").siblings("ul").css({"color":"red","border":"2px solid red"});        //siblings()方法可以有参数，添加参数是指选择子元素中符合参数的元素
20 }); 
21 </script>
22 </head>
23 <body>
24 
25 <div class="descendants" style="500px;">div (当前元素) 
26   <p >p (儿子元素)
27     <span>span (孙子元素)</span>     
28   </p>
29   <p >p (儿子元素)
30     <span>span (孙子元素)</span>
31   </p> 
32   <ul>ul(儿子元素)</ul>
33 </div>
34 
35 </body>
36 </html>

2.next（）返回一个元素，即是下一个同胞元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 /* 这种选择器是指类.descendants之后所有的元素执行这样的css样式*/
 7 .descendants *                                       
 8 { 
 9     display: block;
10     border: 2px solid lightgrey;
11     color: lightgrey;
12     padding: 5px;
13     margin: 15px;
14 }
15 </style>
16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
17 </script>
18 <script>
19 $(document).ready(function(){
20   $("p.2").next().css({"color":"red","border":"2px solid red"});        
21 }); 
22 </script>
23 </head>
24 <body>
25 
26 <div class="descendants" style="500px;">div (当前元素) 
27   <p class="1">p (儿子元素)
28     <span>span (孙子元素)</span>     
29   </p>
30   <p class="2">p (儿子元素)
31     <span>span (孙子元素)</span>
32   </p> 
33   <ul>ul(儿子元素)</ul>
34 </div>
35 
36 </body>
37 </html>

nextAll(),nextUntil()和前面的祖先遍历类似，不过是换了方向，针对子类。

而prev（）的几个方法与next（）方法类似，不同的是，next（）系列方法是向后遍历，而prev（）系列方法是向前遍历。

5.JQuery遍历——过滤

过滤的方法：

first（）
last（）
eq（）
filter（）
not（）

1.first（）返回被选元素的首个元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 /* 这种选择器是指类.descendants之后所有的元素执行这样的css样式*/
 7 .descendants *                                       
 8 { 
 9     display: block;
10     border: 2px solid lightgrey;
11     color: lightgrey;
12     padding: 5px;
13     margin: 15px;
14 }
15 </style>
16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
17 </script>
18 <script>
19 $(document).ready(function(){
20   $("div p").first().css({"color":"red","border":"2px solid red"});        
21 }); 
22 </script>
23 </head>
24 <body>
25 
26 <div class="descendants" style="500px;">div (当前元素) 
27   <p >p (儿子元素)                                                       //该元素被选中
28     <span>span (孙子元素)</span>     
29   </p>
30   <p>p (儿子元素)
31     <span>span (孙子元素)</span>
32   </p> 
33   <p>ul(儿子元素)</p>
34 </div>
35 
36 </body>
37 </html>

同理，last（）是被选中的最后一个元素

2.eq（）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 /* 这种选择器是指类.descendants之后所有的元素执行这样的css样式*/
 7 .descendants *                                       
 8 { 
 9     display: block;
10     border: 2px solid lightgrey;
11     color: lightgrey;
12     padding: 5px;
13     margin: 15px;
14 }
15 </style>
16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
17 </script>
18 <script>
19 $(document).ready(function(){
20   $("div p").eq(1).css({"color":"red","border":"2px solid red"});                                   //返回索引的元素，索引值从0开始   
21 }); 
22 </script>
23 </head>
24 <body>
25 
26 <div class="descendants" style="500px;">div (当前元素) 
27   <p >p (儿子元素)
28     <span>span (孙子元素)</span>     
29   </p>
30   <p>p (儿子元素)                                                           //该元素被选中
31     <span>span (孙子元素)</span>
32   </p> 
33   <p>ul(儿子元素)</p>
34 </div>
35 
36 </body>
37 </html>

3.filter（）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 /* 这种选择器是指类.descendants之后所有的元素执行这样的css样式*/
 7 .descendants *                                       
 8 { 
 9     display: block;
10     border: 2px solid lightgrey;
11     color: lightgrey;
12     padding: 5px;
13     margin: 15px;
14 }
15 </style>
16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
17 </script>
18 <script>
19 $(document).ready(function(){
20   $("*").filter(".1").css({"color":"red","border":"2px solid red"});                                   //返回选定的条件，没有选定的就不返回   
21 }); 
22 </script>
23 </head>
24 <body>
25 
26 <div class="descendants" style="500px;">div (当前元素) 
27   <p >p (儿子元素)
28     <span class="1">span (孙子元素)</span>     
29   </p>
30   <p>p (儿子元素)
31     <span>span (孙子元素)</span>
32   </p> 
33   <p class="1">ul(儿子元素)</p>
34 </div>
35 
36 </body>
37 </html>

同理，not（）方法是返回不符合的元素，与filter相反。

本博客基于网络课程完成，旨在学习，有错误请指正！

查看全文

相关阅读:
XCode快捷键转
 [iOS] UIView的clipsTobounds属性
 ios 重用UI部分代码的好方法（再也不用为局部变量的命名而烦恼啦！）
symbol(s) not found for architecture armv7
duplicate symbol _main in: / linker command failed with exit code 1
xcode4.3.2 arc模式下导入非arc的文件转
 objective-c block 详解转
 将asi-http-request引入到ARC工程需要做的转
 浅用block 转
 在Xcode4.5中禁用ARC（Automatic Referencing Counting）转

原文地址：https://www.cnblogs.com/comefuture/p/6728038.html