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 相关文章推荐
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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
实用函数8
2007/11/08 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
JavaScript多线程详解
2015/08/12 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
你真的了解Python的random模块吗?
2017/12/12 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Python语言进阶知识点总结
2019/05/28 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
通过实例解析python描述符原理作用
2020/01/22 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
学校领导班子对照检查材料
2014/08/28 职场文书
维稳工作承诺书
2015/01/20 职场文书
公司处罚决定书
2015/06/24 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python