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 相关文章推荐
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
vue组件实现进度条效果
Jun 06 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
React Native项目框架搭建的一些心得体会
May 28 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
数据库中排序的对比及使用条件详解
2012/02/23 PHP
php计算年龄精准到年月日
2015/11/17 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python+pyqt实现右下角弹出框
2017/10/26 Python
单利模式及python实现方式详解
2018/03/20 Python
python中join()方法介绍
2018/10/11 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Python实现括号匹配方法详解
2020/02/10 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
生产内勤岗位职责
2013/12/07 职场文书
统计专业自荐书
2014/07/06 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL