<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 100px;height: 100px;margin-top:10px;
}
.bgc{background-color: green;}
.fontSize30{font-size: 30px;}
.width200{width: 200px;}
</style>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
</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="bgc">div1</div1>
<script type="text/javascript">
$(function(){
//1.添加类
$(‘#addClass‘).click(function(){
//1.1添加单个类
// $(‘#div1‘).addClass(‘fontSize30‘);
//1.2添加多个类
$(‘#div1‘).addClass(‘fontSize30 width200‘);
});
//2.移除类
$(‘#removeClass‘).click(function(){
//2.1删除单个类
$(‘#div1‘).removeClass(‘fontSize30‘);
//2.2删除多个类
// $(‘#div1‘).removeClass(‘fontSize30 width200‘);
//2.3删除所有的类
// $(‘#div1‘).removeClass();
});
//3.判断类
$(‘#hasClass‘).click(function(){
//判断一个元素有没有某个类，如果有，就返回true；没有就返回false；
console.log($(‘#div1‘).hasClass(‘fontSize30‘));
});
//4.切换类
$(‘#toggleClass‘).click(function(){
//如果元素有某个类就移除这个类；如果元素没有这个类就添加这个类
$(‘#div1‘).toggleClass(‘fontSize30‘);
});
});
</script>
</body>
</html>
原文：https://www.cnblogs.com/csj2018/p/13306200.html