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 相关文章推荐
jQuery Ajax请求状态管理器打包
May 03 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
js前端图片加载异常兜底方案
Jun 21 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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
js的三种继承方式详解
2017/01/21 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Python 面试中 8 个必考问题
2018/11/16 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python实现静态web服务器
2019/09/03 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
浅析python 字典嵌套
2020/09/29 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
劳动竞赛活动总结
2014/05/05 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2014年会计工作总结
2014/11/27 职场文书
建议书范文
2015/02/05 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书