jQuery常见的遍历DOM操作详解


Posted in jQuery onSeptember 05, 2018

本文实例总结了jQuery常见的遍历DOM操作。分享给大家供大家参考,具体如下:

向上遍历DOM树

  • .parent():返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历
  • .parents():返回被选元素的所有祖先元素,一直向上遍历,直到文档的根元素(html)
  • .parentsUntil():返回介于两个给定元素之间的所有祖先元素
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *{
display:block;
border:2px solid lightgrey;
color:lightgrey;
padding:5px;
margin:15px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script >
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500;">div(曾祖父)
<ul>ul(祖父)
<li>li(直接父)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div(祖父)
<p>p(直接父)
<span>span</span>
</p>
</div>
</div>
</body>
</html>

运行结果:

jQuery常见的遍历DOM操作详解

parentsUntil()方法

$(document).ready(function(){
$("span").parentsUntil("div");
});
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *{
display:block;
border:2px solid lightgrey;
color:lightgrey;
padding:5px;
margin:15px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors">body(增曾祖父)
<div style="width:500px;">div(曾祖父)
<ul>ul(祖父)
<li>li(直接父)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>

运行结果:

jQuery常见的遍历DOM操作详解

向下遍历DOM树

  • .children():返回被选元素的所有直接子元素,该方法只会向下一级对DOM树进行遍历
  • .find():返回被选元素的后代元素,一直向下直到最后一个后代

children()方法

<!DOCTYPE html>
<html>
<head>
<style>
.descendants *{
display:block;
border:2px solid lightgrey;
color:lightgrey;
padding:5px;
margin:15px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
$("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div(当前元素)
<p class="1">p(子)
<span>span(孙)</span>
</p>
<p class="2">p(子)
<span>span(孙)</span>
</p>
</div>
</body>
</html>

运行结果:

jQuery常见的遍历DOM操作详解

find()方法

<!DOCTYPE html>
<html>
<head>
<style>
.descendants *{
display:block;
border:2px solid lightgrey;
color:lightgrey;
padding:5px;
margin:15px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div(current element)
<p>P子
<span>span(孙)</span>
</p>
<p>p子
<span>span(孙)</span>
</p>
</div>
</body>
</html>

运行结果:

jQuery常见的遍历DOM操作详解

返回<div>所有后代

$(document).ready(function(){
$("div").find("*");
});

水平遍历DOM树

  • .siblings():返回被选元素的所有同胞
  • .next():返回被选元素下一个同胞元素
  • .nextAll():返回被选元素的所有跟随的同胞元素
  • .nextUntil():返回介于两个给定参数之间的所有跟随的同胞元素
  • .prev():返回被选元素上一个同胞元素
  • .prevAll():返回被选元素的所有之前的同胞元素
  • .prevUntil():返回介于两个给定参数之间的所有之前的同胞元素
<!DOCTYPE html>
<html>
<head>
<style>
.siblings *{
display:block;
border:2px solid lightgrey;
color:lightgrey;
padding:5px;
margin:15px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div(父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>

运行结果:

jQuery常见的遍历DOM操作详解

jQuery遍历 过滤

  • first()方法:返回被选元素的首个元素
  • last()方法:返回被选元素的最后一个元素
  • eq()方法:返回被选元素中带有指定索引号的元素
  • filter()方法:允许自己规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
  • not()方法:返回不匹配的所有元素
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").first().css("background-color","yellow");
});
</script>
</head>
<body>
<h1>我心在北朝、</h1>
<div>
<p>田野上</p>
</div>
<div>
<p>红彤彤的野花</p>
</div>
<p>玲珑剔透</p>
</body>
</html>

运行结果:

jQuery常见的遍历DOM操作详解

eq()方法的使用

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").eq(1).css("background-color","yellow");
});
</script>
</head>
<body>
<h1>我心在南朝、</h1>
<p>田野上</p>
<p>红彤彤的野花</p>
<p>玲珑剔透</p>
<p>我爱你</p>
</body>
</html>

运行结果:

jQuery常见的遍历DOM操作详解

filter()方法的使用

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".intro").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>我心在南朝、</p>
<p>田野上</p>
<p class="intro">红彤彤的草莓</p>
<p class="intro">玲玲剔透</p>
<p>我爱你</p>
</body>
</html>

运行结果:

jQuery常见的遍历DOM操作详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 #jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
详解jQuery中的easyui
Sep 02 #jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 #jQuery
jQuery解析json格式数据示例
Sep 01 #jQuery
You might like
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
javascript版2048小游戏
2015/03/18 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Python Logging 日志记录入门学习
2018/06/02 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Python实现结构体代码实例
2020/02/10 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
幼儿园教师培训方案
2014/02/04 职场文书
综合实践活动方案
2014/02/14 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
技术入股合作协议书
2014/10/07 职场文书
教师个人事迹材料
2014/12/17 职场文书
储备店长岗位职责
2015/04/14 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
一文搞懂python异常处理、模块与包
2021/06/26 Python