jQuery的选择器

最新推荐文章于 2024-09-05 16:56:18 发布

qq_43568455

最新推荐文章于 2024-09-05 16:56:18 发布

阅读量101

点赞数

分类专栏： JAVAWEB

本文链接：https://blog.csdn.net/qq_43568455/article/details/103266047

版权

JAVAWEB 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

id选择器

$("#id") id是自己定义

元素选择器

$(“element”) element可以是 div, span ,table等元素

类选择器

$(".class")class是自己定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="myCSS.css" />
		<script src="../JQ/jquery-1.8.3.js"></script>
		<script>
			$(function(){
			$("#btn1").click(function(){
					$("#one").css("background-color","pink");
				});
			$("#btn2").click(function(){
					$(".mini").css("background-color","pink");
				});
			$("#btn3").click(function(){
					$("div").css("background-color","pink");
				});
				$("#btn4").click(function(){
					$("*").css("background-color","pink");
				});
				$("#btn5").click(function(){
					$("#two,.mini").css("background-color","pink");	
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择为one的元素"/>
		<input type="button" id="btn2" value="选择样式为mini的元素"/>
		<input type="button" id="btn3" value="选择所有的div元素"/>
		<input type="button" id="btn4" value="选择所有元素"/>
		<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
		<hr />
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
			<div id="two">
			<div class="mini">
				111
			</div>
		</div>
			<div id="three">
			<div class="mini">
				111
			</div>
		</div>
			<div id="four">
			<div class="mini">
				111
			</div>
		</div>
	</body>
</html>