举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历

一、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 树中沿着同胞元素向后遍历，而不是向前）。

赞 (0)

相关推荐

  • 浅谈jQuery 选择器和dom操作

    浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1)."$("#id")",获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2)."$(".class")",获取class指定的元素,不同的元素可以具有相同的class属性

  • jQuery利用sort对DOM元素进行排序操作

    jQuery利用sort对DOM元素进行排序操作

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来进行重新渲染列表到客户端,这样做未尝不可,但是在有些情况下,我们既不需要利用框架也不需要重新生成列表到客户端,明明可以在客户端进行,达到我们的目的,为何要再一次发送请求到服务器呢?下面我们来看看. 话题 我们首先看看在w3c中js的sort方法. <script type="text/java

  • 使用jQuery监听DOM元素大小变化

    起因 今天写页面的时候突然有这么个需求,由于父元素(一个DIV)的height是由javascript计算出来的固定的值,而在其中增加了一个多说插件,在用户评论后,子元素(DIV)的height属性增加,导致子元素溢出.但是又不知道如何为多说的评论按钮增加回调函数,于是乎就想到了根据子元素的大小变化来重新计算父元素的height. onresize? 平常,都是在整个浏览器窗口变化时触发一个修改布局的回调函数.使用的是window对象的resize事件,利用: window.onresize =

  • jQuery对象与DOM对象转换方法详解

    本文实例分析了jQuery对象与DOM对象的转换方法.分享给大家供大家参考,具体如下: jQuery对象转换为dom对象 只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作.有时尤其是在初学jQuery,无法记住jQuery的所有函数时,会有很长一段时间使用jQuery选择器配合原始的dom函数进行开发.所以两种对象的转化是很有必要的. jQuery对象的索引保存的是do

  • JS/jQuery判断DOM节点是否存在的简单方法

    JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th

  • 详解jQuery中的DOM操作

    详解jQuery中的DOM操作

    大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li> <li title=

  • javascript中html字符串转化为jquery dom对象的方法

    原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px

  • JQuery中DOM实现事件移除的方法

    本文实例讲述了JQuery中DOM实现事件移除的方法.分享给大家供大家参考.具体如下: 可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("c

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

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

    如下图,显示了HTML中的结构树,通过 JQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称为对 DOM 进行遍历. 遍历 - 父级(祖先) 向上遍历DOM数. 通过如下三个方法,我们可以获取父级元素: parent() parents() parentsUntil() 1.JQuery parent() parent() 方法返回被选元素的直接父元素. 该方法只会向上一级对 DOM 树进行遍历. <section

  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c

随机推荐