addClass() 方法向被选元素添加一个或多个类,该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。
removeClass () 方法从被选元素移除一个或多个类。
hasClass () 方法检查被选元素是否包含指定的 class。
toggleClass () 对设置或移除被选元素的一个或多个类进行切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.li1 {
color: blue;
}
.li2,.li3 {
background: red;
}
.li4 {
font-size: 24px;
}
</style>
<!--引包-->
<script src="jquery-1.12.2.js"></script>
</head>
<body>
<ul>
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li3">333</li>
<li id="li4">444</li>
<input type="button" id="btn" value="切换样式"/>
</ul>
<script>
//入口函数
$(function () {
// 获取li2,li3的对象
var li2 = $("#li2");
var li3 = $("#li3");
// 给li2 li3 添加背景颜色红色
li2.addClass("li2");
li3.addClass("li3");
// 移除li2的背景颜色
li2.removeClass("li2");
// 判断li1是否有类.li1,如果没有添加样式改变字体颜色
if(!$("#li1").hasClass("li1")) {
$("#li1").addClass("li1");
}
// 点击按钮切换li4的样式,改变其字体大小
$("#btn").click(function () {
$("#li4").toggleClass("li4");
})
})
</script>
</body>
</html>
结果如下,点击按钮后字体变大,再点击字体又会变小