举例讲解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 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
解决vue自定义全局消息框组件问题
Nov 22 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
js中更短的 Array 类型转换
2011/10/30 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Python重新加载模块的实现方法
2018/10/16 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Python基于Faker假数据构造库
2020/11/30 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
银行自荐信范文
2013/10/07 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
支行行长竞聘报告
2014/11/06 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL