举例讲解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 相关文章推荐
判断是否存在子节点的实现代码
May 18 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
js实现一键复制功能
Mar 16 Javascript
Angular2自定义分页组件
Apr 19 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
JavaScript数组常用的增删改查与其他属性详解
Oct 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 mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
php取得字符串首字母的方法
2015/03/25 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
js函数般调用正则
2008/04/08 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
python的链表基础知识点
2020/09/13 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
如何写好升职自荐信
2014/01/06 职场文书
关于人生的感言
2014/01/17 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
关于爱国的标语
2014/06/24 职场文书
课外活动总结范文
2014/07/09 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书