jQuery 遍历 - 后代
来源:互联网 发布:淘宝15天售后无忧 编辑:程序博客网 时间:2024/04/30 03:14
后代是子、孙、曾孙等等。
通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代。
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
- children()
- find()
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 <div> 元素的所有直接子元素:
实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="jquery.js"></script><style>.descendants *{display:block;border:2px #CCC solid;color:#CCC;padding:5px;margin:15px;}</style><script>$(document).ready(function(){$("div").children().css({"color":"#00F","border":"2px solid #00F"});})</script></head><body><div class="descendants" style="width:500px;">div (当前元素) <ul class="1"> ul (子) <li> li(孙) <span>span(曾孙)</span> </li> </ul><ul class="2"> ul (子) <li> li(孙) <span>span(曾孙)</span> </li> </ul></div></body></html>
效果图:
您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:
实例
<script>$(document).ready(function(){//$("div").children().css({"color":"#00F","border":"2px solid #00F"})$("div").children("ul.1").css({"color":"#00F","border":"2px solid #00F"})})</script>效果图:
jQuery find() 方法
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素:
实例
<script>$(document).ready(function(){//$("div").children().css({"color":"#00F","border":"2px solid #00F"})//$("div").children("ul.1").css({"color":"#00F","border":"2px solid #00F"}) $("div").find("span").css({"color":"#00F","border":"2px solid #00F"});})</script>效果图:
返回 <div> 的所有后代:
实例
$(document).ready(function(){//$("div").children().css({"color":"#00F","border":"2px solid #00F"})//$("div").children("ul.1").css({"color":"#00F","border":"2px solid #00F"})// $("div").find("span").css({"color":"#00F","border":"2px solid #00F"}); $("div").find("*").css({"color":"#00F","border":"2px solid #00F"});})</script>效果图:
0 0
- jQuery 遍历 - 后代
- jQuery 遍历 - 后代
- 21. jQuery 遍历 - 后代
- jQuery 遍历 - 后代
- jQuery遍历-后代
- jQuery遍历----------(遍历、祖先、后代、同胞、过滤)
- JQuery遍历元素的后代和同胞
- jquery源码解析之遍历后代
- jQuery遍历并获得后代的值
- jQuery 遍历 - 后代children() find()(二十三)
- 知识点五:JQuery-遍历==>后代Children(),find()
- jQuery 遍历 “后代”的几种表示方法
- JQuery遍历元素的后代和同胞(同一辈的)
- jquery监听元素的后代
- jQuery选择器 – 后代过滤(Child Filters)
- 祖先后代选择器ancestor descendant(jQuery)
- jquery祖先、同胞、后代抓取方法
- [第七季]12.遍历元素的后代和同胞
- Android自定义圆形图片
- 咪咕音乐给力好歌推荐 “国民妹妹”新作来袭
- 如何确定 客户端连接Oracle时的端口号、全局数据库名等信息
- 第十七周上机项目二~~(1)
- js判断浏览器
- jQuery 遍历 - 后代
- 用字符数组存放一个字符串
- DEVEXPRESS 破解方法
- 第四章 Controller接口控制器详解(2)
- 工作流绑定facade方法
- 学习笔记----各种排序(先从宝哥这里转来,以后自己多写写)
- velocity 语法
- 第十七周 利用指针和数组的方法分别查询字符串的个数
- 幻世(OurDream)2D图形引擎使用教程14——GUI图形用户界面系统(2)