<script src="/UploadFiles/2021-04-02/Extend.js">

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