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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 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实现的功能是显示8条基色色带
2006/10/09 PHP
mysql limit查询优化分析
2008/11/12 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
JS 表单验证大全
2011/11/23 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
获取python文件扩展名和文件名方法
2018/02/02 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
用Django写天气预报查询网站
2018/10/21 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
Python实现元素等待代码实例
2019/11/11 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
应届生人事助理求职信
2013/11/09 职场文书
道德模范先进事迹
2014/02/14 职场文书
监督检查工作方案
2014/05/28 职场文书
求职简历自荐信
2014/06/18 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
学校食堂管理制度
2015/08/04 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle