所谓的遍历是指：用于根据其相对于其他元素的关系来查找或者选取HTML 元素。jQuery中的遍历主要有四种：祖先、子代、同胞（同级）、过滤
一、祖先
对于祖先的遍历，通俗的理解就是向上查找，主要有：parent()、parents()、parentsUntil()三类
1.parent():返回直接父元素【即只返回一级父级】
<div>
<p>
<span class="warp"></span>
</p>
</div>
$("span").parent();//仅返回div的一级父级
根据parent返回被选元素的直接父级，本例中仅仅返回span的直接父级p而返回间接父级div
2.parents()：返回所有祖先元素，直到文档的根元素 (<html>)
<div>
<p>
<span class="warp"></span>
</p>
</div>
$("span").parents();//返回div的所有祖先元素
根据parents返回被选元素的所有父级，本例中返回span的所有父级：p和div
parents()可以通过设置参数来返回特定的祖先元素
$("p").parents("div");//返回p的所有div祖先元素
3.parentsUntil():返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div"); //返回span和div之间的所有祖先元素
二、后代
对于后代的遍历，通俗的理解就是向下查找，主要有：children()、find()两大类
1.children():返回被选元素的所有直接子元素。【即只返回一级子级】
$("div").children() //返回div下的所有一级子元素
children()也可以通过设置参数来返回特定的元素
<div>
<span class="warp">
我是div的直接子级
<span>我是div的间接子级</span>
</span>
</div>
$("div").children("span") //返回div下的所有span的直接子元素
根据children返回被选元素的直接后代，本例中仅仅返回类名为warp的span元素
2.find():返回被选元素的所有后代元素，直到最后一个后代。
<div>
<span class="warp">
我是div的直接子级
<span>我是div的间接子级</span>
</span>
</div>
$("div").find("span");
根据find返回被选元素的所有后代，本例中返回div下的所有span元素
三、同胞
对于同胞的遍历，通俗的理解就是遍历拥有同一个父级的元素，主要有：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()七大类
1.siblings()：查找所有兄弟（包括哥哥和弟弟）
<div>
<h1>同级</h1>
<p>我是p
<span class="warp"></span>
</p>
<div class="con">你好</div>
</div>
$("p").siblings().css('color','red');
image.png
同理，也可以通过设置参数来返回特定的元素
<div>
<h1>同级</h1>
<p>
<span class="warp"></span>
</p>
<div class=“con”></div>
</div>
$("p").siblings(".con").css('color','red');
image.png
2.next():查找紧挨着的弟弟
<div>
<h1>同级</h1>
<span>我是span</span>
<p>我是p </p>
</div>
$("h1").next().css('color','red');
image.png
3.nextAll()：查找所有弟弟
<div>
<h1>同级</h1>
<span>我是span</span>
<p>我是p </p>
</div>
$("h1").nextAll().css('color','red');
image.png
4.nextUntil(expr) ：查找所有弟弟，直到碰到符合expr条件，不包含符合expr条件的那个元素
<div>
<h1>同级</h1>
<span>我是span</span>
<p>我是p </p>
</div>
$('h1').nextUntil("p").css('color','red');
image.png
5.prev():查找紧挨着的哥哥
<div>
<h1>同级</h1>
<span>我是span</span>
<p>我是p </p>
</div>
$('p').prev().css('color','blue');
image.png
6.prevAll()：查找所有的哥哥
<div>
<h1>同级</h1>
<span>我是span</span>
<p>我是p </p>
</div>
$('p').prevAll().css('color','blue');
image.png
7.prevUntil(expr) ：查找所有的哥哥，直到碰到符合expr条件，不包含符合expr条件的元素
<div>
<h1>同级</h1>
<span>我是span</span>
<p>我是p </p>
</div>
$('span').prevUntil('p').css('color','blue');
prevUntil.png
四、过滤
对于过滤的遍历，通俗的理解就是在一组元素中的选择一个特定的元素。主要有first(), last() 和 eq()三大类
1.first() ：返回被选元素的首个元素。
<div>
<p>第一个p</p>
<p>第二个p</p>
<p>第三个p</p>
</div>
$('div p').first().css('color','red');
image.png
2.last() :返回被选元素的最后一个元素。
<div>
<p>第一个p</p>
<p>第二个p</p>
<p>第三个p</p>
</div>
$('div p').last().css('color','red');
image.png
3.eq() :返回被选元素中带有指定索引号的元素。【索引号从 0 开始】
<div>
<p>第一个p</p>
<p>第二个p</p>
<p>第三个p</p>
</div>
$('div p').eq(1).css('color','red');
image.png
