7种jQuery操作css2.1选择器方法，总有一款适合你！
程序员文章站
2022-03-08 18:59:52
...
本博文源于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>