jQuery学习教程二十: jQuery 遍历

后代是子、孙、曾孙等等。

通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

向下遍历 DOM 树

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

children()
find()

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素：

实例

<!DOCTYPE html>
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){$("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body><div class="descendants" style="width:500px;">div (当前元素) <p>p (子)<span>span (孙)</span>     </p><p>p (child)<span>span (孙)</span></p>
</div></body>
</html>

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

下面的例子返回类名为 "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("*");
});

jQuery学习教程二十: jQuery 遍历 - 后代相关推荐

jQuery学习（二）—jQuery对象的获取
jQuery学习(二)-jQuery对象的获取
jQuery学习教程五：jQuery 效果 - 淡入淡出, Fading 方法
实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法. <!DOCTYPE html> <html> <head> <script ...
jQuery学习教程
jQuery学习教程 jQuery API文档安装jQuery 引用jquery 查看jQuery版本信息 jQuery语法 jQuery选择器元素选择器 #id 选择器 .class 选择器 j ...
Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)
Table of Contents appendTo appendTo(source, target) 源代码 append prependTo prependTo源码 prepend ...
jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
动画骨骼【Visual C++】游戏开发五十二浅墨DirectX教程二十骨骼动画来袭（一）...
间时紧张,先记一笔,后续优化与完善. 本系列文章由zhmxy555(毛星云)编写,载转请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/detail ...
（转）tensorflow入门教程(二十六)人脸识别(上)
https://blog.csdn.net/rookie_wei/article/details/81676177 1.概述查看全文 http://www.taodudu.cc/news/show- ...
【Visual C++】游戏开发五十二浅墨DirectX教程二十骨骼动画来袭（一）
这是答应大家的讲解骨骼动画的文章的N部曲的第二篇.这篇文章里,我们对现行的三种模型动画技术进行了概述,然后对X文件构成进行了详细的剖析,最后放出了骨骼动画的第一个示例程序,载入了<诛仙>中 ...
【Visual C++】游戏开发五十二浅墨DirectX教程二十骨骼动画来袭（一）
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8832812 作者:毛星云(浅墨 ...

jQuery学习教程二十: jQuery 遍历 - 后代

向下遍历 DOM 树

jQuery children() 方法

实例

实例

jQuery find() 方法

实例

实例

jQuery学习教程二十: jQuery 遍历 - 后代相关推荐

最新文章

热门文章