3.1 JQ的基本选择器

最新推荐文章于 2023-05-09 21:15:00 发布

P_ning

最新推荐文章于 2023-05-09 21:15:00 发布

阅读量160

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/P_ning/article/details/96380443

版权

jQuery 专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 10px;
				width:  10px;
				margin: 10px;
				text-align: center;
				padding:40px;
				display:inline-block;
				border: 1px solid #FF0000;
			}
			span{
				height: 10px;
				width:  10px;
				margin: 10px;
				text-align: center;
				padding:40px;
				display:inline-block;
				border: 1px solid #FF0000;
			}
		</style>
	</head>
	<body>
		<script type="text/jscript" src="../../js库/jquery-2.1.0.js"></script>
		<script>
			//恢复
			$(function(){
				$("#btn").click(function(){
					$("*").css("background-color","while");
				});
			});
//id选择器
			$(function(){
				$("#btn1").click(function(){
					$("#i1").css("background-color","red");
				});
			});
//类选择器
			$(function(){
				$("#btn2").click(function(){
					$(".c2").css("background-color","blue");
				});
			});
//元素选择器
			$(function(){
				$("#btn3").click(function(){
					$("div").css("background-color","yellow");
				});
			});
//通配符选择器
		$(function(){
				$("#btn4").click(function(){
					$("*").css("background-color","purple");
				});
			});
//选择器分组,又叫并集选择器
		$(function(){
				$("#btn5").click(function(){
					$("span,div").css("background-color","black");
				});
			});
		</script>
<!-- 按钮区 -->			
		<input type="button" value="恢复初始" id="btn">	
		<input type="button" value="改变到id为i1的div的背景颜色" id="btn1"><!-- id选择器 -->
		<input type="button" value="改变到类为c2的div的背景颜色" id="btn2"><!-- 类选择器 -->
		<input type="button" value="改变到div的背景颜色" id="btn3"><!-- 元素选择器 -->
		<input type="button" value="改变所有元素背景颜色" id="btn4"><!-- 通配符选择器 -->
		<input type="button" value="改变div和span背景颜色" id="btn5"><!-- 选择器分组 -->
		<br />
<!-- div区 -->
		<div id="i1">1</div>
		<div class="c2">2</div>
		<div>3</div>
		<span>5</span>
	</body>
</html>