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 相关文章推荐
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
js实现微博发布小功能
Jan 12 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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&amp;java(二)
2006/10/09 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python实现单词翻译功能
2017/06/06 Python
python计算auc指标实例
2017/07/13 Python
python奇偶行分开存储实现代码
2018/03/19 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
个人先进事迹材料
2014/12/29 职场文书
五一劳动节活动总结
2015/02/09 职场文书
党支部培养考察意见
2015/06/02 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
MySQL创建表操作命令分享
2022/03/25 MySQL