3个案例演示jquery操作dom(选择/控制/运动能力)

本博文源于jquery基础，通过三个案例演示jquery的三大能力：选择元素的能力、批量控制元素的能力和实现运动能力

执念斩长河

502人浏览 · 2020-05-29 17:29:18

执念斩长河 · 2020-05-29 17:29:18 发布

本博文源于jquery基础，通过三个案例演示jquery的三大能力：选择元素的能力、批量控制元素的能力和实现运动能力

选择元素能力

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<ul>
				<li class="spec"></li>
			</ul>
		</div>
		<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$("#app ul li.spec").html("你好！");
		</script>
	</body>
</html>

测试效果

在这里插入图片描述
通过选择dom结构，实现对内容的修改能力

批量控制元素能力

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$("p").css ({
				"width":60,
				"height":60,
				"background-color":"orange"
			});
		</script>
	</body>
</html>

测试效果

在这里插入图片描述
原生态js需要用到循环，而这些只需要1个$符号语句轻松做到

实现运动的能力

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div></div>
		<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$("div").css ({
				"width":100,
				"height":100,
				"background-color":"orange",
				"position":"relative"
			
			});
			$("div").animate({"left":800},3000);
		</script>
	</body>
</html>

测试效果

在这里插入图片描述
jquery一个animate()函数用来实现运动，第一个参数表示盒子的运动终点，最终会运动到left=800位置上。3000是运动时长，1000是1秒

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。