jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，在jQuery中，我们可以使用.addClass()、.removeClass()和.toggleClass()方法来修改元素的class。
1、.addClass()方法：为指定的元素添加一个或多个class，如果元素已经具有这些class，则不会重复添加。
语法：
$(selector).addClass(className);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery addClass示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">原始盒子</div>
<button id="btn">添加高亮</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(".box").addClass("highlight");
});
});
</script>
</body>
</html>
在这个示例中，当点击id为"btn"的按钮时，会为class为"box"的元素添加一个名为"highlight"的class，使其背景变为黄色。
2、.removeClass()方法：从指定的元素中删除一个或多个class，如果元素没有这些class，则不会执行任何操作。
语法：
$(selector).removeClass(className);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery removeClass示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box highlight">带有高亮效果的盒子</div>
<button id="btn">移除高亮</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(".box").removeClass("highlight");
});
});
</script>
</body>
</html>
在这个示例中，当点击id为"btn"的按钮时，会为class为"box"的元素删除一个名为"highlight"的class，使其背景恢复原状。
3、.toggleClass()方法：在指定的元素上切换一个或多个class，如果元素已经具有这些class，则删除它们；如果没有，则添加它们。
语法：
$(selector).toggleClass(className);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery toggleClass示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">原始盒子</div>
<button id="btn">切换高亮</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(".box").toggleClass("highlight");
});
});
</script>
</body>
</html>
在这个示例中，当点击id为"btn"的按钮时，会为class为"box"的元素切换一个名为"highlight"的class，使其背景在黄色和原始颜色之间切换。