举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历


Posted in Javascript onJuly 07, 2016

一、jQuery的向下遍历

<script src="../JS/Extend.js"></script>
 <script src="../JS/my.js"></script>
 <link type="text/css" rel="stylesheet" href="../CSS3/my.css">

</head>
<body>
<div id="div1">
 <div id="div2">
  <p id="p1">
   <a>hello world</a>
  </p>
 </div>
</div>

#div1{
 width:500px;
 height:200px;
 border:3px solid coral;
}

#div2{
 width:400px;
 height:150px;
 margin-top:10px;
 margin-left:10px;
 border: 3px solid coral;
}

#p1{
 margin-left:10px;
 margin-top:10px;
 width:150px;
 height:80px;
 border:3px solid coral;
}

1.children()方法的元素遍历

$(document).ready( function (){
 $("#div1").children().css({border:"3px solid black"});
});

可以看到此时div1的儿子div2的边框颜色变成了黑色。

2.find()方法的元素遍历

$(document).ready( function (){
 $("#div1").find("a").css({border:"3px solid grey"});
});

可以看到此时div1的重孙子a元素出现了灰色边框。、

.children()与.find()方法的区别是:children只能对元素的儿子元素进行修改,而find则可以对其所有的子元素进行修改。

二、jQuery的向上遍历
顾名思义,向上遍历就是从子集找到父集。

.parent()
$(document).ready( function (){
 $("#div2").parent().css({border:"3px solid black"});
 });

div2的父元素div1边框发生了改变

.parents()
$(document).ready( function (){
 $("a").parents().css({border:"3px solid grey"});
});

a元素除外,a元素的所有父级元素都发生了改变

.parentUntil()
$(document).ready( function (){
  $("a").parentsUntil("#div1").css({border:"3px solid grey"})
});

从a元素到div1元素之前的元素边框发生了改变。

三个方法的区别是,.parent()只能向上遍历一层;.parents()则可以指定父级元素的id进行跨越遍历;.parentUntil()则具有区间性质,将会遍历包含于区间中的所有元素。

三、遍历 - 同级(兄弟)
同级元素拥有相同的父级元素。

在 DOM 树中水平遍历。

有许多有用的方法让我们在 DOM 树进行水平遍历:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

1.JQuery siblings()

siblings() 方法返回被选元素的所有同胞元素。

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
</section>
$(document).ready(function () {
 // 获取h1标签的所有同级元素
 var elem = $('h1').siblings();
 console.log(elem); // p p 
});

2.JQuery next()

next() 方法返回被选元素的下一个同胞元素

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
</section>
$(document).ready(function () {
 // 获取h1标签的下一个同级元素
 var elem = $('h1').next();
 console.log(elem); // p
});

3.JQuery nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素。

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
</section>
$(document).ready(function () {
 // 获取p标签的后面的所有同级元素
 var elem = $('p').nextAll();
 console.log(elem); // p
});

4.JQuery nextUntil()

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
 <h2>重点注意</h2>
</section>
$(document).ready(function () {
 // 获取
 var elem = $('h1').nextUntil('h2');
 console.log(elem); // p p 
});

5.JQuery prev() & prevAll() & prevUntil()

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同级元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

Javascript 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
javascript中的隐式调用
Feb 10 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 #Javascript
简单实现js页面切换功能
Jan 10 #Javascript
JavaScript作用域示例详解
Jul 07 #Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 #Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 #Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 #Javascript
jQuery之简单的表单验证实例
Jul 07 #Javascript
You might like
php 字符串函数收集
2010/03/29 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
python基础教程之常用运算符
2014/08/29 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python中的列表知识点汇总
2015/04/14 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python执行精确的小数计算方法
2019/01/21 Python
python仿抖音表白神器
2019/04/08 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python对列表的操作知识点详解
2019/08/20 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
经典演讲稿范文
2013/12/30 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
保护地球的标语
2014/06/17 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript