jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents()、 parent()、closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考。
1.parents([selector])
本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的。
同时,本方法还接受一个字符串选择器,用于从返回的节点集中筛选符合选择器的子元素集。
2.parent([selector])
本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的父节点。它和parents()不同的是,它只向上搜索一层,而parents()会搜索整个DOM树。
本方法也可以接受一个字符串选择器,用于筛选返回的元素。
有人可能会问:一个DOM元素的父元素不是只有一个么,为什么还要一个selector选择器进行筛选呢?其实一个jQuery对象可能包含有很多个DOM元素,例如$('a').parent()就是选择所有<a>标签的父元素,这样返回的就是一个元素集,所以可以进行筛选。
3.closest(selector)
本方法用于向上遍历jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,直到找到符合selector选择器的节点为止。
它和parents()的区别:
closest()从自身开始向上遍历,直到找到一个适合的节点,返回的jQuery对象包含0个或者1个对象;
parents()从自身的父节点开始向上遍历,返回所有祖先节点,并根据选择器对这些节点进行筛选,最终返回的jQuery对象可能包含0、1或者多个对象。
<!DOCTYPE html>
<html>
<head>
<title>a test document</title>
</head>
<body>
<div>
<p>
<span>
<b>My parents</b>
</span>
</p>
</div>
</body>
</html>
在上述文档中:
$('b').parents()将返回:由span、p、div、body、html等元素构造的jQuery对象;
$('b').parent()将返回:由span构造的jQuery对象;
$('b').closest('div')将返回:由div构造的jQuery对象。
相关推荐
-
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
如下图,显示了HTML中的结构树,通过 JQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称为对 DOM 进行遍历. 遍历 - 父级(祖先) 向上遍历DOM数. 通过如下三个方法,我们可以获取父级元素: parent() parents() parentsUntil() 1.JQuery parent() parent() 方法返回被选元素的直接父元素. 该方法只会向上一级对 DOM 树进行遍历. <section
-
jQuery遍历DOM元素与节点方法详解
本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,
-
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
本文实例讲述了jQuery获取父元素节点.子元素节点及兄弟元素节点的方法.分享给大家供大家参考,具体如下: 先来看这段html代码,整个取节点(父.子.兄弟等)的方法都是围绕这段代码来的: <ul class="par"> <li id="firstli"> <h3 class="title">条目一</h3> <ul class="par"> <li id=&
-
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素.可以用: 比如: <div id="dom"> <div></div> <div></div> <div></div></div> var
-
JQuery遍历元素的父辈和祖先的方法
JQuery遍历 首先我们要知道 什么是 父亲,儿子,后代,同胞,祖先 •<div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先. •<ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素 •左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代. •<span> 元素是 <li> 的子元素,同时是 <
-
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考. 1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方
-
javascript先序遍历DOM树的方法
DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM树进行遍历,同时DOM2中的"Traversal"模块又提供了两种新的类型,从而可以很方便地实现DOM树的先序遍历. 注:本文中的5种方法都是对DOM的先序遍历方法(深度优先遍历),并且只关注Element类型. 1. 使用DOM1中的基础接口,递归遍历DOM树 DOM1中为基础类型Nod
-
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使用它们啊.下面本文将给大家详细介绍这四个方法之间的区别,分别对每个方法都进行了详细的介绍,话不多说,来一起看看详细的介绍: 在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使用的样本. <ul id="members" data-role=&
-
jQuery常见的遍历DOM操作详解
本文实例总结了jQuery常见的遍历DOM操作.分享给大家供大家参考,具体如下: 向上遍历DOM树 .parent():返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历 .parents():返回被选元素的所有祖先元素,一直向上遍历,直到文档的根元素(html) .parentsUntil():返回介于两个给定元素之间的所有祖先元素 <!DOCTYPE html> <html> <head> <style> .ancestors *{ disp
-
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
本文实例讲述了JavaScript实现的DOM树遍历方法.分享给大家供大家参考,具体如下: 二叉 DOM 树的遍历 function Tree() { var Node = function(key){ this.key = key; this.left = null; this.right = null; } root =null; } 前序遍历 首先访问根结点,然后遍历左子树,最后遍历右子树 Tree.prototype.preOrderTraverse = function(callbac
-
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
一.jQuery的向下遍历 <script src="../JS/Extend.js"></script> <script src="../JS/my.js"></script> <link type="text/css" rel="stylesheet" href="../CSS3/my.css"> </head> <body&
-
JQuery遍历DOM节点的方法
本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临近节点等的一些方法. children()方法 该方法用于取得匹配元素的子元素集合.根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数. 下面使用children()方法来获取匹配元素的所有子元素的个数. var $body = $("body").children();
-
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法.分享给大家供大家参考.具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素.将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素.可是,有时候也会用到复制元素的操作.例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上.实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会.毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会
随机推荐
- XML简介
- 解析离线安装Eclipse的Android ADT开发插件的具体操作(图文)
- 原生js封装自定义滚动条
- Windows Vista中IIS7的安装及配置ASP+Access环境的图文教程
- 一个小助手批处理实例代码
- Windows下写一个文件备份脚本(专用备份的)
- python 判断是否为正小数和正整数的实例
- JS中令人发指的valueOf方法介绍
- ichart.js绘制虚线、平均分虚线效果的实现代码
- JavaScript Array对象详解
- Python脚本实现下载合并SAE日志
- 修改Android签名证书keystore的密码、别名alias以及别名密码
- Zend Framework教程之Zend_Controller_Plugin插件用法详解
- 我教你学之注册表基本操作
- 在局域网共享中- 隐形的文件
- 15个顶级Java多线程面试题(附答案)
- 封装了一个Java数据库访问管理类
- 在ASP.NET 2.0中操作数据之五十九:使用SQL缓存依赖项SqlCacheDependency
- php ajax 静态分页过程形式
- Android Intent调用 Uri的方法总结