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 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
webpack之引入图片的实现及问题
Oct 08 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 miniBB中文乱码问题解决方法
2008/11/25 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
JsChart组件使用详解
2018/03/04 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
es6数值的扩展方法
2019/03/11 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python写入xml文件的方法
2015/05/08 Python
python中zip()方法应用实例分析
2016/04/16 Python
Python函数参数操作详解
2018/08/03 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
简单的命令查看安装的python版本号
2020/08/28 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
业绩考核岗位职责
2014/02/01 职场文书
导师就业推荐信范文
2014/05/22 职场文书
励志演讲稿大全
2014/08/21 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
mysql 索引合并的使用
2021/08/30 MySQL