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 相关文章推荐
Table冻结表头示例代码
Aug 20 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
js实现汉字排序的方法
Jul 23 Javascript
详解Bootstrap按钮
Jan 04 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JS简单数组排序操作示例【sort方法】
May 17 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
php数据访问之增删改查操作
2016/05/09 PHP
List Installed Hot Fixes
2007/06/12 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
原生js实现日期联动
2015/01/12 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python pip 常用命令汇总
2020/10/19 Python
css sprite简单实例
2016/05/23 HTML / CSS
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
煤矿安全生产月活动总结
2014/07/05 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书