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

jQuery 2019-01-05

一、jQuery的向下遍历

rush:xhtml;">
hello world

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()方法的元素遍历

rush:js;"> $(document).ready( function (){ $("#div1").children().css({border:"3px solid black"}); });

可以看到此时div1的儿子div2的边框颜色变成了黑色。

2.find()方法的元素遍历

rush:js;"> $(document).ready( function (){ $("#div1").find("a").css({border:"3px solid grey"}); });

可以看到此时div1的重孙子a元素出现了灰色边框。、

.children()与.find()方法的区别是:children只能对元素的儿子元素进行修改，而find则可以对其所有的子元素进行修改。

二、jQuery的向上遍历

顾名思义，向上遍历就是从子集找到父集。

rush:js;"> .parent() $(document).ready( function (){ $("#div2").parent().css({border:"3px solid black"}); });

div2的父元素div1边框发生了改变

rush:js;"> .parents() $(document).ready( function (){ $("a").parents().css({border:"3px solid grey"}); });

a元素除外，a元素的所有父级元素都发生了改变

rush:js;"> .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() 方法返回被选元素的所有同胞元素。

rush:xhtml;">

文章的标题啦

文章的内容内容内容内容内容内容

结尾部分

rush:js;"> $(document).ready(function () { // 获取h1标签的所有同级元素 var elem = $('h1').siblings(); console.log(elem); // p p });

2.JQuery next()

next() 方法返回被选元素的下一个同胞元素

rush:xhtml;">

文章的标题啦

文章的内容内容内容内容内容内容

结尾部分

rush:js;"> $(document).ready(function () { // 获取h1标签的下一个同级元素 var elem = $('h1').next(); console.log(elem); // p });

3.JQuery nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素。

rush:xhtml;">

文章的标题啦

文章的内容内容内容内容内容内容

结尾部分

rush:js;"> $(document).ready(function () { // 获取p标签的后面的所有同级元素 var elem = $('p').nextAll(); console.log(elem); // p });

4.JQuery nextUntil()

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

rush:xhtml;">

文章的标题啦

文章的内容内容内容内容内容内容

结尾部分

重点注意

rush:js;"> $(document).ready(function () { // 获取 var elem = $('h1').nextUntil('h2'); console.log(elem); // p p });

5.JQuery prev() & prevAll() & prevUntil()

prev(),prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同级元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

DOMJavaScriptjQueryjs遍历遍历遍历

相关文章

jquery页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印
jQuery 添加水印 <script src="../../../.....
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
中文：Sys.WebForms.PageRequestManagerParserErrorExceptio...
Asp.net 后台调用js方法
1. 用Response.Write方法 代码如下： Response.Write(&q...
Jquery实现按钮点击遮罩加载，处理完后恢复
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按...