在 jQuery 中，addClass()、removeClass()、toggleClass() 是操作元素 CSS 类的核心方法，相比原生 JS 直接修改 className 更简洁、更易维护（支持批量操作、动态逻辑、链式调用）。下面将通过示例详细讲解这三个方法。
CSS 类操作的本质是修改 DOM 元素的 classList（原生）或 className属性，jQuery 封装后让操作更直观，且兼容低版本浏览器。
该方法用于为匹配的元素追加一个/多个 CSS 类，不会覆盖已有类，重复添加会自动去重。语法如下表：
| 用法 | 说明 |
|---|---|
$(elem).addClass(className) | 追加单个 / 多个类（多个类用空格分隔） |
$(elem).addClass(function(index, oldClass)) | 动态生成要添加的类（函数返回类名字符串，index 是元素索引，oldClass 是元素当前的类名） |
示例：
<p class="otherClass">这是一个P标签</p>执行如下 jQuery 代码：
$('p').addClass('myClass')为匹配的 <p> 元素添加一个名为 myClass 的 CSS 类。
该方法用于从匹配元素中移除指定的 CSS 类。如果不传入参数，会移除所有的 CSS 类。语法如下表：
| 用法 | 说明 |
|---|---|
$(elem).removeClass() | 移除元素的所有 CSS 类 |
$(elem).removeClass(className) | 移除单个 / 多个类（多个类用空格分隔） |
$(elem).removeClass(function(index, oldClass)) | 动态生成要移除的类（函数返回要移除的类名字符串） |
示例：
<p class="otherClass">这是一个P标签</p>执行如下 jQuery 代码：
$('p').removeClass('myClass');删除匹配的所有 <p> 元素上名为 myClass 的 CSS 类。
用于为元素切换指定类（存在则移除，不存在则添加），是“添加/移除”的快捷方式；可选参数 sw 可强制控制添加 / 移除。
语法如下表：
| 用法 | 说明 |
|---|---|
$(elem).toggleClass(className) | 切换单个 / 多个类（多个类用空格分隔） |
$(elem).toggleClass(function(index, oldClass, sw)) | 动态生成要切换的类（函数返回类名，sw 是当前切换状态） |
$(elem).toggleClass(className, switch) | 强制控制：switch=true 则添加类，switch=false 则移除类 |
示例：
<p class="otherClass">这是一个P标签</p>执行如下 jQuery 代码：
$('p').toggleClass('myClass');将在所有匹配的 <p> 元素上添加/删除名为 myClass 的 CSS 类。
下面示例通过“点击自己动手试一试”可以尝试各种方法的效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
/* 效果样式 */
.myClass { box-shadow: inset 0 0 3px red; }
</style>
</head>
<body>
<div class="app">
<h3>CSS 类</h3>
<p class="otherClass">这是一个P标签</p>
</div>
<div>
<!-- addClass(class|fn) 为每个匹配的元素添加指定的类名 -->
<button type="button" onclick="
// 添加一个类名 myClass 到所有的 p 元素上
$('p').addClass('myClass');
log.info('p 的 class：' + $('p').attr('class'));
">$('p').addClass('myClass')</button>
<!-- removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类 -->
<button type="button" onclick="
// 删除所有 p 元素上的 myClass 类
$('p').removeClass('myClass');
log.info('p 的 class：' + $('p').attr('class'));
">$('p').removeClass('myClass')</button>
<!-- toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类 -->
<button type="button" onclick="
// 切换 p 元素上的 myClass 类
$('p').toggleClass('myClass');
log.info('p 的 class：' + $('p').attr('class'));
">$('p').toggleClass('myClass')</button>
<button type="button" onclick="
// 切换 p 元素上的 myClass 类
$('p').toggleClass(function(index, currentClass){
log.info('当前元素类名：', currentClass);
return $('.app').length > 0 ? 'myClass' : '';
});
">$('p').toggleClass(function(){...})</button>
</div>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098