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>

運行結果：