jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别


Posted in Javascript onDecember 02, 2013

在这个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对象。

Javascript 相关文章推荐
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 #Javascript
浅析jquery的作用与优势
Dec 02 #Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 #Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 #Javascript
jquery中的过滤操作详细解析
Dec 02 #Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 #Javascript
用JS实现3D球状标签云示例代码
Dec 01 #Javascript
You might like
php用户注册信息验证正则表达式
2015/11/12 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
jQuery.extend 函数详解
2012/02/03 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
详解vue 命名视图
2019/08/14 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
Python request设置HTTPS代理代码解析
2018/02/12 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
Python tornado上传文件的功能
2020/03/26 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
生物制药专业自我鉴定
2014/02/19 职场文书
房屋租赁协议书
2014/04/10 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
小学语文复习计划
2015/01/19 职场文书
2015年采购工作总结
2015/04/10 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
家访教师心得体会
2016/01/23 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书