当前位置 博文首页 > 立志欲坚不欲锐，成功在久不在速度：jQuery - 元素遍历
前言：?
? ? ? 一提到“遍历”,大家一般都能联想到? each()? 或者? for()等语法，但是在jQuery中究竟什么是遍历？?
? ? ? ?jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
? ? ? ?下图展示了一个家族树。通过 jQuery 遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种称为对DOM进行遍历。
?JQuery的遍历方法最大的种类就是树的遍历
? ? 通过jQuery能够向上遍历DOM树，查找元素的祖先
1.parent()
? ? ? ?parent()方法返回被选元素的直接父元素，该方法只会向上一级对DOM树进行遍历
? ?例子： 返回每个<span>元素的直接父元素
$(document).ready(function(){
$("span").parent();
})2.parents()
? ? ? parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素(<html>)
例子： 返回所有<span> 元素的所有祖先
$(document).ready(function(){
$("span").parents();
})也可以在parents()中 通过 参数来过滤对祖先元素的搜索
下面的例子：? 返回所有的<span> 元素的所有祖先，并且他是<ul> 元素?
$(document).ready(function(){
$("span").parents("ul");
})
3.parentsUntil()?
? 方法返回介于两个给定元素之间的所有祖先元素?
?例子： 返回介于 <span> 和 <div>元素之间的所有祖先元素
$(document).ready(function(){
$("span").parentsUntil("div");
});结果：
后代是子 ，孙，曾孙 等
通过jQuery，我们可以向下遍历DOM树，以查找元素的后代
1.children()
方法返回被选元素的所有直接子元素，只会对最近的下一级Dom树进行遍历
例子：返回每个<div>元素的所有直接子元素：
$(document).ready(function(){
$("div").children();
})也可以使用参数来过滤子元素
例子： 返回所有类名为"1" 的所有<p>元素，并且他们是<div>的直接子元素
$(document).ready(function(){
$("div").children("p.1");
});2.find()?
?返回被选元素的后代元素，一路向下直到最后一代
?例子： 返回属于<div> 后代的所有<span>标签?
?
$(document).ready(function(){
$("div").find("span");
})?
?
兄弟之间拥有相同的父元素，通过jQuery能够在DOM树中遍历元素的同胞元素?
在DOM树中水平遍历
1.siblings() 方法 返回被选元素的所有同胞元素
实例: 返回<h2>的所有兄弟元素
$(documen).ready(function(){
$("h2").siblings();
})1.1可以使用参数来过滤对兄弟元素的选择
例子： 返回属于<h2>同胞元素的所有<p>元素
$(document).ready(function(){
$("h2").siblings("p");
});?
2. next()方法，
该方法返回被选元素的下一个同胞元素，该方法只返回一个元素
例子： 下面的例子返回 <h2>的下一个兄弟元素
$(document).ready(function(){
$("h2").next();
})3.nextAll()方法? 返回被选元素的所有跟随的兄弟元素
例子： 返回<h2>的所有跟随的兄弟元素
$(document).ready(function(){
$("h2").nextAll();
})4.nextUntil() 方法 返回介于两个给定参数之间的所有跟随的兄弟元素
例子：返回介于<h2>与<h6>元素之间的所有兄弟元素
$(document).ready(function(){
$("h2").nextUntil("h6");
})5.prev() 方法返回前面的兄弟元素，和next()方法的使用一样
?
?
?
?
?
?
?
?
?
?
?
cs