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

最新推荐文章于 2022-03-25 20:03:35 发布

执念斩长河

最新推荐文章于 2022-03-25 20:03:35 发布

阅读量475

点赞数

分类专栏： JS基础

本文链接：https://blog.csdn.net/m0_37149062/article/details/106429563

版权

JS基础专栏收录该内容

123 篇文章 6 订阅

订阅专栏

本博文源于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>