心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

jquery怎么查询子元素

发布时间：2022-05-17 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了jquery怎么查询子元素，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

jquery查询子元素的方法：1、使用children()方法，可以获取指定元素下的直接子集元素；2、使用find()方法，可以获取指定元素下的所有（包括子集的子集）子集元素。

jquery怎么查询子元素

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

jQuery 子元素选择器 find() 和 children()

  • children()方法：获取该元素下的直接子集元素

  • find()方法：获取该元素下的所有（包括子集的子集）子集元素

<htML>
<head>
	<;meta charset="UTF-8">
	<tITle>Document</title>
	<style>
		div{
			/*background-color: pink;*/
		}
	</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:&#39;#a61c00',backgroundColor:"#0000ff"});
	console.LOG($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined 
 
	// $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
</script>
</html>

jquery怎么查询子元素

此时我们再把find 这项打开注释

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			/*background-color: pink;*/
		}
	</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]);
 
 
	$("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
	console.log($("div").find(".no1")[0]);
</script>
</html>

对应截图：

jquery怎么查询子元素

总结 一下区别：

children() 方法返回返回被选元素的所有直接子元素 （直接子元素，只找儿子不要孙子（： 也就是说不会递归去遍历）

find()方法获得当前元素集合中每个元素的后代 （注意find（）方法，必须传参数，否者无效）

【推荐学习：jQuery视频教程、web前端】

以上就是jquery怎么查询子元素的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的jquery怎么查询子元素全部内容，希望文章能够帮你解决jquery怎么查询子元素所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程