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学习之闭包分析
Dec 02 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
javascript基本类型详解
Nov 28 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
小程序实现多列选择器
Feb 15 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 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 和 MySQL 基础教程(四)
2006/10/09 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
js实现微信聊天效果
2020/08/09 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
详解Python中类的定义与使用
2017/04/11 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Django 路由控制的实现
2019/07/17 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Python @property原理解析和用法实例
2020/02/11 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
利用python汇总统计多张Excel
2020/09/22 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
留学自荐信
2013/10/10 职场文书
高一化学教学反思
2014/02/05 职场文书
铁路安全事故反思
2014/04/26 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python