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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
一个符号插入器 中用到的js代码
Sep 04 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JavaScript交换变量常用4种方法解析
Sep 02 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
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
如何通过python计算圆周率PI
2020/11/11 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
《满井游记》教学反思
2014/02/26 职场文书
八一建军节感言
2014/02/28 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
总经理检讨书范文
2015/02/16 职场文书
我的长征观后感
2015/06/09 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Python必备技巧之字符数据操作详解
2022/03/23 Python