jQuery学习教程二十: jQuery 遍历
来源:互联网 发布:数据透视表行合计 编辑:程序博客网 时间:2024/05/18 00:18
后代是子、孙、曾孙等等。
通过 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("*");});
0 0
- jQuery学习教程二十: jQuery 遍历
- jQuery学习教程二十一: jQuery 遍历
- jQuery学习教程二十二: jQuery 遍历
- jQuery学习教程十: jQuery
- jQuery学习教程十八: jQuery 遍历
- jQuery学习教程十九: jQuery 遍历
- jQuery学习教程二:jQuery选择器
- jQuery学习教程二十三: jQuery
- jQuery学习教程二十四: jQuery
- jQuery学习教程二十五: jQuery
- jQuery学习教程二十六: jQuery
- jQuery教程 7 遍历
- Jquery mobile学习教程之Jquery mobile 二 页面结构
- jQuery学习 四 jQuery jQuery 遍历
- jquery教程二:属性
- jquery系列教程二
- jQuery学习 一 jQuery 教程
- jQuery学习教程十一: jQuery
- 单点登录的三种实现方式
- Python 模块学习:os模块
- Android自定义属性点出来记录(命名空间没有写对)
- PHP语法
- 网易2017年秋招第三题
- jQuery学习教程二十: jQuery 遍历
- 找假币
- debug.keystore改成和发布的key的sha1签名一样
- Error:Could not install Gradle distribution from 'https://services.gradle.org/distributions/gradle-2
- 正则表达式常见例子
- 关于使用php连接sql server的方法
- 西瓜书第五章 神经网络
- py 流程控制语法
- VIM 使用技巧汇总——————持续更新中