本文摘自PHP中文网,作者coldplay.xixi,侵删。
jquery children()和find()区别:1、【children()】方法返回返回被选元素的所有直接子元素;2、【find()】方法获得当前元素集合中每个元素的后代。
本教程操作环境:windows7系统、jquery3.2.1版本、thinkpad t480电脑。
推荐:jquery视频教程
jquery children()和find()区别:
查看children()代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <html>
<head>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
div{
}
</style>
</head>
<body>
<div>
<span>11</span>
<span>
<ul>
<li class = "no1" >aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</span>
<span>222</span>
<ul>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</div>
</body>
<script src= "http://code.jquery.com/jquery-latest.js" ></script>
<script>
$( "div" ).children( ".no1" ).css({color: '#a61c00' ,backgroundColor: "#0000ff" });
console.log($( "div" ).children( ".no1" )[0]);
</script>
</html>
|
此时我们再把find 这项打开注释
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <html>
<head>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
div{
}
</style>
</head>
<body>
<div>
<span>11</span>
<span>
<ul>
<li class = "no1" >aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</span>
<span>222</span>
<ul>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</div>
</body>
<script src= "http://code.jquery.com/jquery-latest.js" ></script>
<script>
$( "div" ).find( ".no1" ).css({color: '#a61c00' ,backgroundColor: "#0000ff" });
console.log($( "div" ).find( ".no1" )[0]);
</script>
</html>
|
对应截图:
总结 一下区别:
相关免费学习推荐:javascript(视频)
以上就是jquery children()和find()区别有哪些的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
jQuery如何设置按钮不可用
jQuery变量加$和不加$的区别是什么
如何判断一个对象是否为jQuery对象
jQuery冲突问题怎么解决
jQuery不等于属性选择器是什么
jQuery如何通过id修改css
jQuery如何判断元素是否在数组中
jQuery 判断节点是否存在
jQuery读取json中文乱码怎么办
jQuery如何判断option是否选中
更多相关阅读请进入《jQuery》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » jquery children()和find()区别有哪些