jQuery 遍历 - 后代
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
- children()
- find()
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 <div> 元素的所有直接子元素：
code：
<!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> 的直接子元素：
code：
<script>
$(document).ready(function(){
$("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>
<div class="descendants" style="width:500px;">div (当前元素)
<p class="1">p (子)
<span>span (孙)</span>
</p>
<p class="2">p (子)
<span>span (孙)</span>
</p>
</div>
jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素：
code：
<script>
$(document).ready(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
下面的例子返回 <div> 的所有后代：
<script>
$(document).ready(function(){
$("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>
jQuery 遍历 - 后代的更多相关文章
- jQuery 遍历后代
后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...
- jQuery遍历-后代
后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...
- jQuery 遍历 – 后代
后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...
- JQuery：JQuery遍历详解
JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...
- 常用的jquery遍历函数
1.Jquery遍历祖先 1).parent() 方法返回被选元素的直接父元素. 2).parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>) ...
- jquery遍历DOM方法总结
1.jQuery 遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery ...
- jQuery遍历文档(重要)
什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您 ...
- jQuery 遍历函数
转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...
- Jquery遍历选中的input标签
$("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value&qu ...
随机推荐
- nginx目录及配置语法
一.Nginx安装目录 1.查看安装目录. 采用yum的方式安装,其实都是安装的一个一个的 pm 包,故可采用如下命令查看 rpm -ql nginx 遵循了 rpm 包管理规范. 2.安装目录详解 ...
- C#汉字转换拼音技术详解（高性能）
public static class ChineseToPinYin { private static readonly Dictionary<<span class="key ...
- Oracle 变量 之 define variable declare 用法及区别
Oracle 变量 之 define variable declare 用法及区别 Table of Contents 1. 扯蛋 2. define和accept 3. variable 3.1. ...
- Cookie实战案例代码
import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import javax.s ...
- win + T 快捷键
和 alt + tab 不同,win + T会在 在任务栏间的程序间进行switch
- 【linux杂谈】遇到REMOTE HOST IDENTIFICATION HAS CHANGED怎么办？
今日遇到如下问题: 警告的大概意思就是,主机密钥发生变更,并提示安全风险(可能存在中间人攻击) 但是事实是,这是因为我重装系统之后遇到的问题.重装系统后,指纹当然会发生变化了...在Xshell实验中 ...
- CVE-2018-2628
哈哈哈,终于等到我复现一个CVE漏洞了. 漏洞描述 Oracle Fusion Middleware(Oracle融合中间件)是美国甲骨文(Oracle)公司的一套面向企业和云环境的业务创新平台.该平 ...
- 前端实现app引导页面动画效果
插件描述:jQuery引导插件TourTip 交互式可视化指南网页上的元素.使用方法 步骤1: 将以下标记添加到您的文档的<head> 你还需要复制旁边插件的css文件夹和下载的IMG文件 ...
- MYSQL—第二部分（Linux版本的安装和数据表的操作）
Linux版本的安装(过于简单了) 安装: ? 1 yum install mysql-server 服务端启动 ? 1 mysql.server start 客户端连接 ? 1 2 3 4 5 6 ...
- Oracle网络相关概念与常用配置文件
监听器(Listener) 监听器是Oracle基于服务端的一种网络服务,主要用于监听客户端向数据库服务器提出的链接请求. 本地服务名(Tnsname) Oracle客户端与服务器端的链接是通过客户端 ...