.parent():返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历
.parents():返回被选元素的所有祖先元素，一直向上遍历，直到文档的根元素(html)
.parentsUntil():返回介于两个给定元素之间的所有祖先元素
<!DOCTYPE html> <html> <head> <style> .ancestors *{ display:block; border:2px solid lightgrey; color:lightgrey; padding:5px; margin:15px; } </style> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script > $(document).ready(function(){ $("span").parent().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div> <div>div(曾祖父) <ul>ul(祖父) <li>li(直接父) <span>span</span> </li> </ul> </div> <div>div(祖父) <p>p(直接父) <span>span</span> </p> </div> </div> </body> </html>
运行结果：
parentsUntil()方法
$(document).ready(function(){ $("span").parentsUntil("div"); });
<!DOCTYPE html> <html> <head> <style> .ancestors *{ display:block; border:2px solid lightgrey; color:lightgrey; padding:5px; margin:15px; } </style> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body>body(增曾祖父) <div>div(曾祖父) <ul>ul(祖父) <li>li(直接父) <span>span</span> </li> </ul> </div> </body> </html>
运行结果：
向下遍历DOM树
.children():返回被选元素的所有直接子元素，该方法只会向下一级对DOM树进行遍历
.find():返回被选元素的后代元素，一直向下直到最后一个后代
children()方法
<!DOCTYPE html> <html> <head> <style> .descendants *{ display:block; border:2px solid lightgrey; color:lightgrey; padding:5px; margin:15px; } </style> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").children().css({"color":"red","border":"2px solid red"}); $("div").children("p.1").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div>div(当前元素) <p>p(子) <span>span(孙)</span> </p> <p>p(子) <span>span(孙)</span> </p> </div> </body> </html>
运行结果：
find()方法
<!DOCTYPE html> <html> <head> <style> .descendants *{ display:block; border:2px solid lightgrey; color:lightgrey; padding:5px; margin:15px; } </style> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").find("span").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div>div(current element) <p>P子 <span>span(孙)</span> </p> <p>p子 <span>span(孙)</span> </p> </div> </body> </html>
运行结果：
返回<div>所有后代
$(document).ready(function(){ $("div").find("*"); });
水平遍历DOM树
.siblings():返回被选元素的所有同胞
.next():返回被选元素下一个同胞元素
.nextAll():返回被选元素的所有跟随的同胞元素
.nextUntil():返回介于两个给定参数之间的所有跟随的同胞元素
.prev():返回被选元素上一个同胞元素
.prevAll():返回被选元素的所有之前的同胞元素
.prevUntil():返回介于两个给定参数之间的所有之前的同胞元素
<!DOCTYPE html> <html> <head> <style> .siblings *{ display:block; border:2px solid lightgrey; color:lightgrey; padding:5px; margin:15px; } </style> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("h2").siblings().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div>div(父) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>
运行结果：
jQuery遍历 过滤
first()方法:返回被选元素的首个元素
last()方法:返回被选元素的最后一个元素
eq()方法:返回被选元素中带有指定索引号的元素
filter()方法:允许自己规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not()方法:返回不匹配的所有元素