本文实例总结了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>
运行结果:
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容还可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。