jQuery常见的遍历DOM操作详解
程序员文章站
2023-08-20 23:16:46
本文实例总结了jquery常见的遍历dom操作。分享给大家供大家参考,具体如下:
向上遍历dom树
.parent():返回被选元素的直接父元素,该方法只会向上...
本文实例总结了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程序设计有所帮助。
上一篇: JSJ—编译器与虚拟机哪个重要?
下一篇: 穿白雨衣的女人
推荐阅读
-
JavaScript遍历DOM元素的常见方式示例
-
java操作(DOM、SAX、JDOM、DOM4J)xml方式的四种比较与详解
-
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
-
JavaScript遍历DOM元素的常见方式示例
-
三个简单实用的用于 DOM 操作的 jQuery 方法讲解
-
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
-
jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
-
使用jQuery操作DOM的方法小结
-
jQuery查找dom的几种方法效率详解
-
Python3实现的字典遍历操作详解