jQuery遍历之向下遍历
2023-09-11 14:22:19 时间
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery</title> <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script> //<script type="text/javascript" src="js/try.js" ></script> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div id="div1">div1 <div id="div2">div2 <p> <a href="#">Hello</a> </p> </div> </div> </body> </html>
css
#div1 { width:500px; height:250px; border:4px solid aquamarine; } #div2 { width:400px; height:150px; margin-left:10px ; margin-top: 10px; border:4px solid blue; } p { margin-left:10px ; margin-top: 10px; width:150px; height:80px; border:4px solid seagreen; }
效果:
向下遍历后:
添加js
1.使用
children()方法
$(document).ready(function(){ $("#div1").children().css({border:"4px solid black"}) });
效果:
2.使用find方法
js
$(document).ready(function(){ $("#div1").find("#div2").css({border:"4px solid black"}) });
效果:
children() 方法和find()方法的区别
1.
$(document).ready(function(){ $("#div1").find("p").css({border:"4px solid black"}) });
2.
$(document).ready(function(){ $("#div1").children("p").css({border:"4px solid black"}) });
效果:
children方法获得的仅仅是元素一下级的子元素,即:immediate children。
find方法获得所有下级元素,即:descendants of these elements in the DOM tree
children方法的参数selector 是可选的(optionally),用来过滤子元素,但find方法的参数selector方法是必选的。
2017-09-21 20:37:02
相关文章
- 【JS】怎样用原生JS实现jQuery的ready方法
- 猴子也能学会的jQuery第十二期——jQuery遍历(中)
- 猴子也能学会的jQuery第十二期——jQuery遍历(上)
- MVC验证08-jQuery异步验证
- 强大的jQuery幻灯片播放插件 支持全拼、拖拽和下载等功能
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
- 1-jQuery - AJAX load() 方法【基础篇】
- 《jQuery Cookbook中文版》——1.9 根据当前上下文遍历DOM获得新的DOM元素集
- JQuery跳出each循环的方法(包含数组遍历)
- jquery.params.js,Jquery获取页面参数,js获取页面参数
- Nice Jquery Validator 【从 jQuery Validation 迁移】
- jquery中提示框layer.msg()设置时间及相关用法
- Jquery瀑布流布局
- Jquery_jquery中attr和prop的区别
- jquery获得select option的值和对select option的操作
- jquery中的trigger()和preventDefault()方法
- Jquery学习—jquery的事件
- jQuery遍历之同级遍历