本文摘自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实现响应滚动条事件功能方法
详解7款绚丽的jQuery/html5动画及源码
jQuery blur()怎么用
jQuery和ajax的区别是什么
在jQuery中如何打开新的窗口
jQuery三大版本之间有什么区别?
jQuery中$("#")和$("#"+xx)的区别
jQuery 如何判断是否有div
bootstrap和jQuery ui之间的简单比较
更多相关阅读请进入《jQuery》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » jquery children()和find()区别有哪些