<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery操作类</title>
<style>
/*<!--指定class1和class2的样式-->*/
.class1{
width: 100px;
height: 100px;
background-color: red;
}
.class2{
border: 10px solid black;
}
</style>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
* addClass:用于给指定标签添加类
* removeClass:用于删除指定标签的类
* toggleClass:用于切换指定标签的类,有就删除,没有就添加
* */
//获取所有的button标签
var btns = document.getElementsByTagName("button");
//给第一个button添加点击事件
btns[0].onclick = function (ev) {
//找到div标签,添加class属性class1和class2
$("div").addClass("class1 class2")
};
//给第二个button添加点击事件
btns[1].onclick = function (ev) {
//找到div标签,删除class属性class1和class2
$("div").removeClass("class1 class2")
};
//给第二个button添加点击事件
btns[2].onclick = function (ev) {
//找到div标签,切换class属性class1和class2,有就删除,没有就添加
$("div").toggleClass("class1 class2")
};
})
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>