jQuery实践1：实现修改css样式_$修改样式-优快云博客

本文通过两个实例介绍了如何使用jQuery简化网页元素的操作。第一个实例展示了如何通过点击事件改变元素的CSS样式和显示状态；第二个实例则演示了如何利用jQuery的选择器来显示不同的HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery实践1：实现修改css样式

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script type="text/javascript" language="javascript" src="jquery-3.1.0.min.js"></script>
</head>
<script type="text/javascript">
		$(document).ready(function(){
			alert("事件链式写法，显示隐藏div，修改css样式。");
		})
</script>
	<style type="text/css">
		.divFrame{width: 260px;border: solid 1px #666;font-size: 10pt;}
		.divTitle{background-color: #eee;padding: 5px;}
		.divContent{padding: 5px;display: none;}
		.divCurrColor{background-color: #f00;}
	</style>
<script type="text/javascript">
	$(function(){
		$(".divTitle").click(function(){
			$(this).addClass("divCurrColor")
			.next(".divContent").css("display","block");
		});
	})
</script>
<body>
	<div class="divFrame">
		<div class="divTitle">点我</div>
		<div class="divContent">
			事件链式写法，显示隐藏div，修改css样式.
		</div>
	</div>

</body>
</html>

jQuery选择器选择对象：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script type="text/javascript" language="javascript" src="jquery-3.1.0.min.js"></script>
</head>
<style type="text/css">
	#div1{background-color: #eee;width: 300px;height: 300px;display: none;}
	#div2{background-color: #ccc;width: 50px;height: 50px;display: none;}
	.div3{background-color: #fff;width: 20px;height: 20px;display: none;}
	#div1 span{display: block;}
</style>
<script type="text/javascript">
		$(function(){
			$("#div1").css("display","block");
		})
		$(function(){
			$("#div2").css("display","block");
		})
		$(function(){
			$(".div3").css("display","block");
		})
		$(function(){
			$("#div1 span").css("display","block");
		})
</script>
<body>
	<div id="div1">
		<div id="div2">
		</div>
		<div class="div3"></div>
		<span>ssss</span>
	</div>
</body>
</html>