<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.fontSize30{
font-size: 30px;
}
.colorClass{
color: red;
}
div{
width:100px;
height: 100px;
background-color: skyblue;
}
.widthClass{
width: 200px;
}
</style>
</head>
<body>
<input type="button" value="添加类" id="addClass"/>
<input type="button" value="移除类" id="removeClass"/>
<input type="button" value="判断类" id="hasClass"/>
<input type="button" value="切换类" id="toggleClass"/>
<div id="div1" class="bg">div1</div>
</body>
</html>
<script src="./jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#addClass").click(function(){
$("#div1").addClass('fontSize30 colorClass widthClass');
})
$("#removeClass").click(function(){
$("#div1").removeClass('colorClass fontSize30 widthClass');
})
$("#hasClass").click(function(){
var flag=$("#div1").hasClass("colorClass");
console.log(flag)
})
$("#toggleClass").click(function(){
$("#div1").toggleClass('colorClass');
})
})
</script>