JQuery中的遍历-元素查找

JQuery遍历概念

jQuery 遍历，可以理解为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。

废话不多说先上方法

方法	描述
add()	把元素添加到匹配元素的集合中
addBack()	把之前的元素集添加到当前集合中
andSelf()	在版本 1.8 中被废弃。addBack()的别名
children()	返回被选元素的所有直接子元素
closest()	返回被选元素的第一个祖先元素
contents()	返回被选元素的所有直接子元素（包含文本和注释节点）
each()	为每个匹配元素执行函数
end()	结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态
eq()	返回带有被选元素的指定索引号的元素
filter()	把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find()	返回被选元素的后代元素
first()	返回被选元素的第一个元素
has()	返回拥有一个或多个元素在其内的所有元素
last()	返回被选元素的最后一个元素
map()	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新jQuery 对象
next()	返回被选元素的后一个同级元素
nextAll()	返回被选元素之后的所有同级元素
nextUntil()	返回介于两个给定参数之间的每个元素之后的所有同级元素
not()	从匹配元素集合中移除元素
offsetParent()	返回第一个定位的父元素
parent()	返回被选元素的直接父元素
parents()	返回被选元素的所有祖先元素
parentsUntil()	返回介于两个给定参数之间的所有祖先元素
prev()	返回被选元素的前一个同级元素
prevAll()	返回被选元素之前的所有同级元素
prevUntil()	返回介于两个给定参数之间的每个元素之前的所有同级元素
siblings()	返回被选元素的所有同级元素
slice()	把匹配元素集合缩减为指定范围的子集

遍历详解

1.向上遍历

-parent()
返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
-parents()
返回被选元素的所有祖先元素，它一路向上直到文档的根元素。
parents()方法可直接指定父元素
eg：
返回所有 span 元素的所有祖先，并且它是 ul 元素：

$("span").parents("ul");

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

2.向下遍历

-children()
返回被选元素的所有直接子元素。 该方法只会向下一级对 DOM 树进行遍历。
-find()
返回被选元素的后代元素，一路向下直到最后一个后代。
eg：
返回div所有后代

 $("div").find("*"); 

3.水平遍历

-siblings()
返回被选元素的所有同胞元素。
-next()
返回被选元素的下一个同胞元素。
-nextAll()
返回被选元素的所有跟随的同胞元素。
-nextUntil()
方法返回介于两个给定参数之间的所有跟随的同胞元素。$(“”)以后的所有的同辈元素，直到…之前的元素，不包括匹配的元素本身。
-prev(), prevAll() & prevUntil()
prev(),prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

4.过滤

-first()
返回被选元素的首个元素。
-last()
返回被选元素的最后一个元素。
-eq()
返回被选元素中带有指定索引号的元素。
-filter()
允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
eg：

$(".parent div").filter(":odd").css("color","red");

-not()
返回不匹配标准的所有元素。not() 方法与 filter() 相反。

5.get方法与eq方法

get(index) 方法获得由选择器指定的 DOM 元素
下标是从0开始，index可选。
通过 index 规定获取哪个匹配元素
eg：
取得 所有p标签中第一个p标签的内容

$("button").click(function(){ 
	x=$("p").get(0);
	Alert(x. innerHTML); 
 });

index()方法查找元素

$("p").click(function(){
	alert($(this).index())；
 })

get()和eq()方法两者区别
eq返回的是一个jquery对象 ，可以继续调用jquery其他方法，
get返回的是一个html 对象数组，不能调用jQuery的其他方法
-jQuery each()
可以遍历指定的元素集合，通过回调函数返回遍历元素的序列号

$(selector).each(function(index){})
$.each($(selector),function(){})