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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery实现tab栏切换效果
Dec 22 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
MySQL相关说明
2007/01/15 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
OpenCV 模板匹配
2019/07/10 Python
用python写测试数据文件过程解析
2019/09/25 Python
利用python实现AR教程
2019/11/20 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
《观察物体》教学反思
2016/02/17 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python