遍历DOM元素,就是以某个元素为起点,向它的父节点,直接点,兄弟节点进行遍历,根据过滤的调节找到想要的元素,并对返回的结果进行操作
向上遍历 DOM 树
parent() •
parents() •
parentsUntil() •
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的的直接父元素：
$(document).ready(function(){
$("span").parent();
});
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});
过滤
您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
$(document).ready(function(){
$("span").parents("ul");
});
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
$(document).ready(function(){
$("span").parentsUntil("div");
});
向下遍历 DOM 树
children() •
find() •
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 <div> 元素的所有直接子元素：
$(document).ready(function(){
$("div").children();
});
children()过滤
您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回class为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});
jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span");
});下面的例子返回 <div> 的所有后代：
$(document).ready(function(){
$("div").find("*");
});
兄弟节点的遍历
由于数量比较多，就通过表格的方式列出各种方法的特点以及说明
分享到：
相关推荐
本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考，具体如下： 一、向上遍历–祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素，方法可以接受一个过滤selector来过滤...
本文实例总结了jQuery常见的遍历DOM操作。分享给大家供大家参考，具体如下： 向上遍历DOM树 .parent():返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历 .parents():返回被选元素的所有祖先元素，一直...
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法： children() find() jQuery children() 方法 children() 方法返回被选元素的所有直接子...
jQuery入门,jQuery入门,jQuery入门,jQuery入门
使用递归和dom遍历dom树形结构 完整代码
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。 向上遍历 DOM 树 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： parent() parents() parentsUntil() jQuery parent() 方法 parent() 方法返回被选...
本文实例讲述了JQuery遍历DOM节点的方法。分享给大家供大家参考。具体分析如下： 本节的核心是介绍JQuery的DOM操作，前面介绍了很多创建、删除、替换等等节点操作。这里介绍如何遍历节点，选中临近节点等的一些方法...
熟练掌握JQuery的技术html赋值、each循环遍历、append追加元素、split分割字符串、indexOf找到索引的综合实例源代码，分享给大家.希望能够帮助到你，谢谢你的支持!
⒉DOM元素遍历及修改（包含对CSS1-3的支持） ⒊事件处理 ⒋动态特效 ⒌AJAX ⒍通过插件来扩展 ⒎方便的工具 - 例如浏览器版本判断 ⒏渐进增强 ⒐链式调用 ⒑多浏览器支持，支持Internet Explorer 6.0+、Opera 9.0+...
jQuery DOM元素哈希插件 支持的哈希方法 base64 md5 sha1 自己编译 如果要编译自己的版本或jquery.hash的修改 npm install node compile 抓取out/jquery.hash.min.js文件并将其插入！ 例子 DOM元素 $elem = $ ...
借助jQuery我们可以轻松地堆DOM元素进行向上、向下遍历以及同级的遍历,本文我们即来整理jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结:
本篇文章提供一款jquery遍历select教程代码，主要是利用了$(“#<%=ddl_xreg_id.clientid%> option”).each(function() {形式来each遍历一次，这样所有的select就给查询了一次。 代码如下:[removed][removed]...
本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点，并将这些节点包装成jQuery对象返回，返回的节点集是以从里到外的顺序排序的。 同时，本方法还接受一个字符串选择器，用于从返回的节点集中...
使用jQuery可以更加容易地遍历DOM的父级、子级和同级元素,这里我们就来举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历:
jQuery 3.1 标准课程第六章 遍历遍历同级元素的方法(三)
《jQuery全能权威指南：jQuery Core+jQuery Plugin+jQuery UI+jQuery Mobile》的阅读对象是具有一些HTML 、CSS和JavaScript知识的开发者，内容覆盖了jQuery知识体系的全部内容，包括jQuery Core、jQuery Plugin 、...