7种jQuery操作css2.1选择器方法，总有一款适合你！

最新推荐文章于 2024-03-13 15:59:24 发布

执念斩长河

最新推荐文章于 2024-03-13 15:59:24 发布

阅读量433

点赞数

分类专栏： JS基础

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

版权

JS基础专栏收录该内容

123 篇文章 6 订阅

订阅专栏

本博文源于jquery基础，主要讲解如何用jquery操作css2.1选择器，一共有七种分别如下，并且每种配置测试案例，可copy体会！

$("#box")  //选择id为box的元素
$(".box") //选择class为box的元素
$("div") // 选择div标签
$("div ul li")//选择div标签后代ul的后代li元素
$(".box ul li.spec")
//选择.box后代ul的后代携带spec类的li元素
$(".box,.spec")
//选择class为spec的元素和class为box的元素
$("div ul *")//选择div标签后代ul的所有元素

选择id为box的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box {
				width: 80px;
				height: 80px;
				background-color: grey;
			}
		</style>
	</head>
		
	<body>
			<div id = "box"></div>
		<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$("#box").css("backgroundColor","orange");
		</script>
	</body>
</html>

在这里插入图片描述

选择class为box的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				width: 80px;
				height: 80px;
				background-color: grey;
			}
		</style>
	</head>
		
	<body>
			<div class="box" id = "box"></div>
		<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$(".box").css("backgroundColor","blue");
		</script>
	</body>
</html>

在这里插入图片描述

选择div标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 80px;
				height: 80px;
				background-color: grey;
			}
		</style>
	</head>
		
	<body>

			<div ></div>
		<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$("div").css("backgroundColor","red");
		</script>
	</body>
</html>

在这里插入图片描述

选择div标签后代ul的后代li元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div ul li {
				width: 80px;
				height: 80px;
				background-color: grey;
				list-style: none;
			}
		</style>
	</head>
		
	<body>

			<div >
				<ul>
					<li></li>
				</ul>
			</div>
		<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$("div ul li").css("backgroundColor","blue");
		</script>
	</body>
</html>

在这里插入图片描述

选择.box后代ul的后代携带spec类的li元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.box ul li.spec {
				width: 80px;
				height: 80px;
				background-color: grey;
				list-style: none;
			}
		</style>
	</head>
		
	<body>

			<div class="box">
				<ul>
					<li class="spec"></li>
				</ul>
			</div>
		<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$(".box ul li.spec").css("backgroundColor","green");
		</script>
	</body>
</html>

在这里插入图片描述

选择class为spec的元素和class为box的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

		.box  {
				width: 160px;
				height: 160px;
				background-color: green;
		
			}
			.spec {
					width: 80px;
					height: 80px;
					background-color: grey;
					list-style: none;
				}
		</style>
	</head>
		
	<body>

			<div class="box">
				<ul>
					<li class="spec"></li>
				</ul>
			</div>
		<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$(".box,.spec").css("backgroundColor","blue");
		</script>
	</body>
</html>

变化前
在这里插入图片描述
jquery变化后

选择div标签后代ul的所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>


			.spec {
					width: 100px;
					height: 100px;
					background-color: grey;
					list-style: none;
					margin-top: 10px;
			
				}
		</style>
	</head>
		
	<body>

			<div class="box">
				<ul>
					<li class="spec">nihao</li>
					<li class="spec">nihao</li>
					<li class="spec">nihao</li>
					<li class="spec">nihao</li>

				</ul>
			</div>
		<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			$("div ul *").css("backgroundColor","red");
		</script>
	</body>
</html>