JQuery的遍历
Posted enternallove
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="width: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="width: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="width: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="width: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="width: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="width: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="width: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="width: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相反。
以上是关于JQuery的遍历的主要内容，如果未能解决你的问题，请参考以下文章