jQuery 遍历

1.祖先

1）parent()方法

返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。

//父元素标记
$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});

2）parents()方法

返回被选元素的所有祖先元素，它一路向上直到文档的根元素。

//标记除子元素之外的所有元素
$(document).ready(function(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
});
//标记ul元素
$(document).ready(function(){
  $("span").parents("ul").css({"color":"red","border":"2px solid red"});
});

3）parentsUntil()方法

返回介于两个给定元素之间的所有祖先元素。

//标记span和div之间的元素
$(document).ready(function(){
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});

2.后代

1）children()方法

返回被选元素的所有直接子元素。

//标记div子元素
$(document).ready(function(){
	$("div").children().css({"color":"red","border":"2px solid red"});
});
//标记div子元素p且类名为1
$(document).ready(function(){
  $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});

2）find()方法

返回被选元素的后代元素，一路向下直到最后一个后代。

//标记<div>后代的所有<span>元素
$(document).ready(function(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
//标记<div>的所有后代
$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});
});

3.同胞

1）siblings() 方法

返回被选元素的所有同胞元素。

//返回标记<h2>的所有同胞元素
$(document).ready(function(){
	$("h2").siblings().css({"color":"red","border":"2px solid red"});
});
<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

2） next()方法

返回被选元素的下一个同胞元素。

$(document).ready(function(){
	$("h2").next().css({"color":"red","border":"2px solid red"});
});

3）nextAll() 方法

返回被选元素的所有跟随的同胞元素。

$(document).ready(function(){
	$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});

4）nextUntil() 方法

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

$(document).ready(function(){
	$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});

4.过滤 

1）first() 方法

返回被选元素的首个元素。

$(document).ready(function(){
  $("div p").first().css("background-color","yellow");
});

2）last() 方法

返回被选元素的最后一个元素。

$(document).ready(function(){
	$("div p").last().css("background-color","yellow");
});

3）eq() 方法

返回被选元素中带有指定索引号的元素。

$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});

4）filter() 方法

不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

$(document).ready(function(){
   $("p").filter(".url").css("background-color","yellow");
});

5）not() 方法

返回不匹配标准的所有元素。

$(document).ready(function(){
   $("p").not(".url").css("background-color","yellow");
});