您的位置：首页 > Web前端 > JQuery

JQuery 入门指南(6): 遍历DOM元素

2014-01-16 23:32 176 查看
遍历DOM元素,就是以某个元素为起点,向它的父节点,直接点,兄弟节点进行遍历,根据过滤的调节找到想要的元素,并对返回的结果进行操作

向上遍历 DOM 树

parent() •

parents() •

parentsUntil() •

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

jQuery parent() 方法

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

下面的例子返回每个 <span> 元素的的直接父元素：
$(document).ready(function(){
$("span").parent();
});

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});

过滤

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
$(document).ready(function(){
$("span").parents("ul");
});

jQuery parentsUntil() 方法

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

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
$(document).ready(function(){
$("span").parentsUntil("div");
});

向下遍历 DOM 树

children() •

find() •

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素：
$(document).ready(function(){
$("div").children();
});

children()过滤

您也可以使用可选参数来过滤对子元素的搜索。

下面的例子返回class为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span");
});下面的例子返回 <div> 的所有后代：
$(document).ready(function(){
$("div").find("*");
});

兄弟节点的遍历

由于数量比较多，就通过表格的方式列出各种方法的特点以及说明

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航