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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
php经典算法集锦
2015/11/14 PHP
功能强大的php分页函数
2016/07/20 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python如何在循环引用中管理内存
2018/03/20 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
windows支持哪个版本的python
2020/07/03 Python
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
中专自荐信
2013/10/13 职场文书
会计专业求职信范文
2014/03/16 职场文书
机械操作工岗位职责
2014/08/08 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
改进工作作风心得体会
2016/01/23 职场文书
初中思品教学反思
2016/02/20 职场文书
python实现商品进销存管理系统
2022/05/30 Python