JQ中的基本选择器

最新推荐文章于 2024-01-14 11:54:30 发布

万万没想到2022

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量234

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/w2019424/article/details/96872018

代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="css/style.css"/>
	<!--引入JQ文件-->
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script>
		//文档加载事件,页面初始化的操作
		$(function(){
			//初始化操作:给按钮绑定事件
			$("#btn1").click(function(){
				$("#two").css("background-color","palegreen");
			});
			
			//找出mini类的所有元素
			$("#btn2").click(function(){
				$(".mini").css("background-color","palegreen");
			});
			
			
			$("#btn3").click(function(){
				$("div").css("background-color","palegreen");
			});
			
			$("#btn4").click(function(){
				$("*").css("background-color","palegreen");
			});
			
			$("#btn5").click(function(){
				$(".mini,span").css("background-color","palegreen");
			});
		});
	</script>
</head>
<body>
	<input type="button" value="找出ID为two的元素" id="btn1" />
	<input type="button" value="找出mini类的所有元素" id="btn2" />
	<input type="button" value="找出所有div元素" id="btn3" />
	<input type="button" value="通配符选择器" id="btn4" />
	<input type="button" value="找出mini类和span元素" id="btn5" /><br />
	<div id="one">
		<div class="mini">1-1</div>
	</div>
	<div id="two">
		<div class="mini">2-1</div>
		<div class="mini">2-2</div>
	</div>
	<div id="three">
		<div class="mini">3-1</div>
		<div class="mini">3-2</div>
		<div class="mini">3-3</div>
	</div>
	<span id="four">span</span>
</body>
</html>

运行的结果,如图：

在这里插入图片描述当点击任一按钮时，会随之出现相应的变化。