jQuery遍历DOM元素与节点方法详解


Posted in Javascript onApril 14, 2016

本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考,具体如下:

一、向上遍历--祖先元素

① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素。

② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点。

备注:parent与parents的区别,parent返回直接父节点,parents返回所有的祖先节点,另外$("html").parent()返回document节点,而$("html").parents()则返回空。

③ $(selector).parentUntil([ancestorSelector][,filter]):返回匹配节点与ancestorSelector之间的所有祖先节点,注意不包括ancestorSelector匹配的几点,方法可以接受一个过滤selector来过滤返回的祖先节点,如果ancestorSelector为空或者在其祖先节点中没有找到匹配ancestorSelector的元素则返回所有祖先节点等同于parents()方法。

$(selector).parentUtil(element[,ancestorSelector]):用法及含义同上。

④ $(selector).offsetParent():返回匹配元素的最近的一个定位的祖先元素,所谓定位祖先元素是指其CSS position属性设置为relative,absolute,fixed,主要在动画演示过程中计算元素的偏移及位置具有很大的作用。

⑤ $(selector).closest(ancestorSelector[,context]):获取最近的一个匹配ancestorSelector的祖先元素,方法可以接受一个参数context来控制搜索的范围。同parents方法有如下区别:

a.closest从来当前元素本身开始向上搜索
parents则从父节点元素开始。

b.closest沿DOM树向上遍历,直到找到匹配ancestorSelector的一个元素位置
parents沿DOM树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选

c.closest返回包含0个或者一个元素的jQuery对象
parents返回包含0个、一个或多个元素的jQuery对象

其它变形用法:

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)

二、向下遍历--子孙元素

① .children([childrenSelector]):返回元素的直接子元素,方法可以接受一个参数来过滤返回的子元素。

② .find(descendantSelector):返回元素的匹配decendantSelector的所有后代元素,一直向下知道最后一个后代。

其它变形用法:

.find(jQuery object);
.find(element);

③ .contents():返回元素的所有子元素,同children的区别是contents包含text节点及comment节点。

三、同级遍历--兄弟元素

① .siblings([selector]):返回当前元素的所有兄弟元素,方法可以接收一个可选参数来过滤返回的兄弟元素。

② .next([selector]):返回当前元素的下一个兄弟元素,方法可以接受一个可选参数来过滤返回的兄弟元素。

③ .nextAll([selector]):返回当前元素后面的所有兄弟元素,方法可以接受一个可选参数来过滤返回的兄弟元素。

④ .nextUntil([selector][,filter]):返回当前元素的所有兄弟元素直到遇到匹配selector条件的兄弟元素,方法可以接受一个可选参数filter来过滤返回的兄弟元素。

⑤ .prev/prevAll/prevUntil与next/nextAll/nextUntil用法相同,作用相近,只是搜索的方向相反。

四、过滤

① .filter(selector):从当前匹配的元素集合中筛选中符合selector条件的子集合,用的用来减少匹配的范围。

.filter(function(index)):根据回调函数来过滤当前匹配的元素集合,回调函数传入参数index是指元素在集合中的索引,在函数体内可用this来代表元素,函数返回true/false,如果返回true,则保留子元素,否则排除子元素。

其它变形用法:

.filter(element|jQueryObject)

② .first():返回当前匹配元素集合中的第一个元素。

③ .last():返回当前匹配元素集合中的最后一个元素。

④ .eq(index/-index):返回当前匹配元素集合指定位置的元素,索引从0开始,负数表示从尾到头的顺序进行排序。

⑤ .has(selector/element):从当前元素集合中返回具有特定子元素的元素集合,排除不具备对应子元素的元素。子元素可以用参数selector或者元素对象来进行匹配。

⑥ .is(selector|function(index)|element|jQueryObject):根据一个选择器或者回调函数或者元素或者jQuery对象来检验元素集合,如果其中至少包含一个符合给定表达式的元素则返回true,否则返回false,另外如果当前元素集合为空或者表达式为空,则返回false。这个方法一般用在回调函数中例如事件处理handler里面,来判断this是否为某个特定元素

⑦ .map(callback(index,domElement)):将当前匹配的元素数组通过回调函数返回值转化为另外一个对象数组(不管是否为dom元素),如果想转化普通jQueryObject数组可以使用jQuery.map(array,callback(objectOfArray,indexOfArray))方法来实现。

⑧ .not(selector|elements|function(index)|jQuery object):从当前匹配的元素数组中删除符合参数调节的元素,参数可以是selector、DOM element、普通的jQuery对象以及一个返回布尔变量的回调函数。

⑨ .slice(start[,end]):从当前匹配的元素集合中获取指定范围的一个子集,start及end如果为负数则获取元素方向从尾到头。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 #Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 #Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 #Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 #Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 #Javascript
详解Jquery实现ready和bind事件
Apr 14 #Javascript
一起学写js Calender日历控件
Apr 14 #Javascript
You might like
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP4实际应用经验篇(5)
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP 文件上传限制问题
2019/09/01 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
解析Python编程中的包结构
2015/10/25 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
Django数据库迁移常见使用方法
2020/11/12 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
中国电视购物:快乐购
2017/02/04 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
银行催款通知书
2015/04/17 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
JavaCV实现照片马赛克效果
2022/01/22 Java/Android