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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
详解jquery和vue对比
Apr 16 jQuery
javascript实现滚动条效果
Mar 24 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
如何开始收听短波广播
2021/03/01 无线电
php知道与问问的采集插件代码
2010/10/12 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
详解python里的命名规范
2018/07/16 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
Python绘制数码晶体管日期
2021/02/19 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
MySQL基础(二)
2021/04/05 MySQL
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js
Android 中的类文件和类加载器详情
2022/06/05 Java/Android