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 switch case 另类写法
Mar 14 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
vue写一个组件
Apr 09 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
一道关于php变量引用的面试题
2010/08/08 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
让python 3支持mysqldb的解决方法
2017/02/14 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
跟单文员的岗位职责
2013/11/14 职场文书
2014学年自我鉴定
2014/02/23 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
七年级作文之游记
2019/12/11 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
JavaScript 对象创建的3种方法
2021/11/17 Javascript