JQuery遍历DOM节点的方法


Posted in Javascript onJune 11, 2015

本文实例讲述了JQuery遍历DOM节点的方法。分享给大家供大家参考。具体分析如下:

本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建、删除、替换等等节点操作。这里介绍如何遍历节点,选中临近节点等的一些方法。

children()方法

该方法用于取得匹配元素的子元素集合。根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数。

下面使用children()方法来获取匹配元素的所有子元素的个数。

var $body = $("body").children(); 
var $p = $("p").children(); 
var $ul = $("ul").children(); 
alert( $body.length ); // <body>元素下有2个子元素 
alert( $p.length );  // <p>元素下有0个子元素 
alert( $ul.length ); // <p>元素下有3个子元素 
for(var i=0;i< $ul.length;i++){ 
  alert( $ul[i].innerHTML ); 
}

PS:children()方法只考虑子元素而不考虑任何后代元素。

next()方法

该方法用于取得匹配元素后面紧邻的同辈元素。从DOM树的结构中可以知道p元素的下一个同辈节点是ul,因此可以通过next()方法来获取ul元素,代码如下:

var $p1 = $("p").next();
// 紧邻p元素后的同辈元素

prev()方法

该方法用于取得匹配元素前面紧邻的同辈元素。从DOM树的结构中可以知道ul元素的上一个同辈节点是p,因此可以通过prev()方法来获取p元素,代码如下:

var $ul = $("ul").prev();
// 紧邻ul元素前的同辈元素

siblings()方法

该方法用于取得匹配元素前后所有的同辈元素。以DOM树的结构为例。ul元素和p元素互为同辈元素,ul元素下的3个li元素也互为同辈元素。

如果要获取p元素的同辈元素,则可以使用如下代码:

var $p2 = $("p").siblings();
// 紧邻p元素的唯一同辈元素

closest()方法

它用来取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的JQuery对象。

比如,给点击的目标元素的最近的li元素添加颜色,可以使用如下代码:

$(document).bind("click", function (e) { 
 $(e.target).closest("li").css("color","red"); 
})

除此之外,在JQuery中还有很多遍历节点的方法,例如find()、filter()、nextAll()、prevAIl()、parent()和parents()等,此处不再赘述,读者可以查看附录的JQuery速查表文档。值得注意的是,这些遍历DOM方法有一个共同点,都可以使用JQuery表达式作为它们的参数来筛选元素。

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

Javascript 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
jquery $.ajax入门应用一
Nov 19 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
js自制图片放大镜功能
Jan 24 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 #Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 #Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 #Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 #Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 #Javascript
JQuery节点元素属性操作方法
Jun 11 #Javascript
JQuery包裹DOM节点的方法
Jun 11 #Javascript
You might like
PHP开发中常用的字符串操作函数
2011/02/08 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
javascript 数组操作详解
2015/01/29 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
pyqt5简介及安装方法介绍
2018/01/31 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
中文专业毕业生自荐信
2013/10/28 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
客服部班长工作责任制
2014/02/25 职场文书
寄语学生的话
2014/04/10 职场文书
双方协议书
2014/04/22 职场文书
领导欢迎词范文
2015/01/26 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
装修公司管理制度
2015/08/05 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python
利用js实现简单开关灯代码
2021/11/23 Javascript