JQuery中,拥有若干个进行CSS操作的方法。
- addClass():向被选元素添加一个或多个类;
- removeClass():向被选元素删除一个或多个类;
- toggleClass():对被选元素进行填加/删除类的切换操作;
- css():设置或返回样式属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鸟教程</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p:nth-child(1)").addClass("red");
$("p:nth-child(2)").addClass("blue");
$("p:nth-child(3)").addClass("green");
});
});
</script>
</head>
<body>
<p>第一个</p>
<p>第二个</p>
<p>第三个</p>
<button>添加class</button>
</body>
</html>