jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结


Posted in Javascript onJuly 07, 2016

如下图,显示了HTML中的结构树,通过 JQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

遍历 - 父级(祖先)
向上遍历DOM数。

通过如下三个方法,我们可以获取父级元素:

  1. parent()
  2. parents()
  3. parentsUntil()

1.JQuery parent()

parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。

<section>
  <h1>文章的<span>标题</span>啦</h1>
  <p>文章的内容内容内容内容内容内容</p>
  <p>结尾部分</p>
</section>
$(document).ready(function () {
  // 通过parent()函数,可获取当前元素的直接父级元素
  var elem = $('span').parent();
  console.log(elem);
});

2.JQuery parents()

parents() 方法返回被选元素的所有父元素。

<section>
  <h1>文章的<span>标题</span>啦</h1>
  <p>文章的内容内容内容内容内容内容</p>
  <p>结尾部分</p>
</section>
$(document).ready(function () {
  // 通过parent()函数,可获取当前元素的所有父级元素
  var elem = $('span').parents();
  console.log(elem); 
});

3.JQuery parentsUntil()

parentsUntil() 方法返回介于两个给定元素之间的所有父级元素

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

遍历 - 子级(后代)
向下遍历DOM树。

向下遍历可以使用如下两个函数:

1.children()
2.find()
1.JQuery children()

children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。

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

2.JQuery find()

find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

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

  // 获取section标签下的所有子元素
  var elems = $('section').find('*');
  console.log(elems);
});

遍历 - 同级(兄弟)

有以下几个方法:
1.sibings()
除自身外,遍历同级的所有元素,修改适用于同级所有元素

2.next()
除自身外,仅下一个元素修改

3.nextAll()
除自身外,修改下面的所有元素

4.nextUntil()
除自身外,对下面的元素进行区间修改

5.prev()
修改上一个元素

6.preAll()
修改位于元素之上的所有元素

7.preUntil()
对位于区间之上的元素进行区间修改

<style>
    .bd *{
      margin:5px;
      padding:3px;
      border:3px solid black;
    }
  </style>
</head>
<body>
<div class="bd">
<p></p>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
  </div>
</body>
$(document).ready(function(){
  //$("h1").siblings().css({border:"3px solid red"})
 //$("h4").nextAll().css({border:"4px solid grey"});
  $("h2").prev().css({border:"3px solid green"});
});
Javascript 相关文章推荐
javascript 数组学习资料收集
Apr 11 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
vue-swiper的使用教程
Aug 30 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
微信小程序实现多选框功能的实例代码
Jun 24 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
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 #Javascript
You might like
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
求职毕业生自荐书
2014/02/08 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
cf战队收人广告词
2014/03/14 职场文书
计划生育标语
2014/06/23 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
JavaScript的function函数详细介绍
2021/11/20 Javascript
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android