类名操作,指的是为元素添加一个 class 或删除一个 class,从而整体控制元素的样式。
在 jQuery 中,CSS 类名操作共有以下 3 种。
本节教程先来介绍第一种添加 class,删除与切换随后介绍。
在 jQuery 中,我们可以使用 addClass() 方法为元素添加一个 class。
语法:
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.select
{
color:red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#btn").click(function(){
$("li:nth-child(odd)").addClass("select");
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="添加" />
</body>
</html>
默认情况下,预览效果如图 1 所示。
我们点击【添加】按钮后,预览效果如图 2 所示。
这个例子与“设置多个 CSS 属性”的例子效果是一样的,但是这种方式相对来说可读性更好,并且更加方便。