jQuery常见的遍历DOM操作详解

2019-11-19 13:01:38

字体：大中小

来源：转载

供稿：网友

本文实例总结了jQuery常见的遍历DOM操作。分享给大家供大家参考，具体如下：

向上遍历DOM树

.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="http://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 class="ancestors"><div style="width:500;">div(曾祖父)<ul>ul(祖父)<li>li(直接父)<span>span</span></li></ul></div><div style="width:500px;">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="http://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 class="ancestors">body(增曾祖父)<div style="width:500px;">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="http://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 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>

运行结果：

find()方法

<!DOCTYPE html><html><head><style>.descendants *{display:block;border:2px solid lightgrey;color:lightgrey;padding:5px;margin:15px;}</style><script src="http://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 class="descendants" style="width:500px;">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="http://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 class="siblings"><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()方法:返回不匹配的所有元素

<!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(document).ready(function(){$("div p").first().css("background-color","yellow");});</script></head><body><h1>我心在北朝、</h1><div><p>田野上</p></div><div><p>红彤彤的野花</p></div><p>玲珑剔透</p></body></html>

运行结果：

eq()方法的使用

<!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(document).ready(function(){$("p").eq(1).css("background-color","yellow");});</script></head><body><h1>我心在南朝、</h1><p>田野上</p><p>红彤彤的野花</p><p>玲珑剔透</p><p>我爱你</p></body></html>

运行结果：

filter()方法的使用

<!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(document).ready(function(){$("p").filter(".intro").css("background-color","yellow");});</script></head><body><h1>我心在南朝、</p><p>田野上</p><p class="intro">红彤彤的草莓</p><p class="intro">玲玲剔透</p><p>我爱你</p></body></html>

运行结果：