jQuery 遍历:
向上遍历DOM树:
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
· parent() //返回被选元素的直接父元素
parents() // parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素(<html>)。
parentsUntil() //parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。
$("span").parent().css({"color":"red","border":"solid10px red"}); //注意css
$("span").parents("ul").css({"color":"red","border":"solid10px red"}); //添加可选参数来过滤祖先元素
$("span").parentsUntil("div").css({"color":"red","border":"2pxsolid red"});
jQuery遍历-后代:
children() //该方法只会向下一级对 DOM 树进行遍历。返回每个 <div> 元素的所有直接子元素:
$("div").children();
返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素
$("div").children("p.1");
find() //返回被选元素的后代元素,一路向下直到最后一个后代
返回属于 <div> 后代的所有 <span> 元素
$("div").find("span").css({"color":"red","border":"2pxsolid red"});
返回 <div> 的所有后代:
$("div").find("*").css({"color":"red","border":"2pxsolid red"});
在 DOM 树中水平遍历:
有许多有用的方法让我们在DOM 树进行水平遍历:
· siblings() //返回所有元素的同胞元素
· $("h2").siblings("p"); //返回所有<h2>的同胞元素的终端额所有<p>元素。
·
· next() //返回被选元素的下一个同胞元素
· nextAll() //返回所选元素的所有跟随的同胞元素
· nextUntil() // 返回介于两个给定参数之间的所有跟随的同胞元素
jQuery prev(), prevAll() & prevUntil() 方法
· prev() //返回被选元素的前一个同胞元素
· prevAll() // 返回被选元素的前面所有的元素
· prevUntil() //返回介于两个给定参数之间的之前的同胞元素
jQuery遍历-过滤:
first()方法 //返回被选元素的首个元素
last()方法 //返回被选元素的最后一个元素
eq()//返回被选元素中带有指定索引号的元素
fiter() //匹配的元素会被返回
$("p").filter(".url");
not() // 与filter()相反
$("p").not(".url"); //返回不带有类名“.url”的所有<p>元素