举例讲解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 相关文章推荐
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
JavaScript包装对象使用介绍
2013/08/29 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python基本语法经典教程
2016/03/11 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
白色公司:The White Company
2017/10/11 全球购物
柏林通行证:Berlin Pass
2018/04/11 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
大学生志愿者感言
2014/01/15 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
公司请假条格式
2014/04/11 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
安全责任协议书范本
2016/03/23 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
nginx静态资源的服务器配置方法
2022/07/07 Servers