jQuery 中的 addClass 和 removeClass - 不删除类
在前端开发中，我们经常需要对 HTML 元素进行样式的添加和移除。而在使用 jQuery 这个流行的 JavaScript 库时，我们可以通过使用 addClass 和 removeClass 方法来方便地实现这个功能。addClass 方法可以向匹配的元素添加一个或多个类名，而 removeClass 方法则可以从匹配的元素中移除一个或多个类名。这两个方法都可以用于单个元素或多个元素，并且可以通过空格分隔多个类名。例如，我们有一个按钮元素，并且为它定义了一个默认的样式类名为 "btn"：html
如果我们希望在点击按钮时为它添加一个新的样式类名 "active"，可以使用 addClass 方法来实现：javascript$("button").click(function() { $(this).addClass("active");});这样，当我们点击按钮时，它会立即获得 "active" 这个样式类名，从而改变其样式。同样地，如果我们希望在点击按钮时移除 "active" 这个样式类名，可以使用 removeClass 方法：javascript$("button").click(function() { $(this).removeClass("active");});这样，当我们点击按钮时，它会立即移除 "active" 这个样式类名，从而恢复到默认的样式。使用 addClass 和 removeClass 的场景addClass 和 removeClass 方法在实际的开发中有着广泛的应用场景。下面我们来看一些常见的使用案例。1. 动态改变按钮样式我们可以通过 addClass 和 removeClass 方法实现按钮样式的动态改变。比如，当用户点击按钮时，我们可以为按钮添加一个新的样式类名，以实现按钮按下的视觉效果。html
在上述代码中，我们为按钮定义了两个样式类名：".btn" 和 ".active"。当用户点击按钮时，我们通过 addClass 方法为按钮添加 ".active" 这个样式类名，从而改变按钮的背景颜色。然后，通过 setTimeout 函数和 removeClass 方法，我们在一秒后移除 ".active" 这个样式类名，使按钮恢复到默认的样式。2. 切换菜单项的选中状态在一个导航菜单中，我们经常需要切换菜单项的选中状态。使用 addClass 和 removeClass 方法可以很方便地实现这个功能。html
在上述代码中，我们为菜单项定义了两个样式类名：".menu-item" 和 ".selected"。当用户点击某个菜单项时，我们通过 addClass 方法为该菜单项添加 ".selected" 这个样式类名，从而改变菜单项的背景颜色和文字颜色。然后，通过 siblings 方法和 removeClass 方法，我们移除其他菜单项的 ".selected" 样式类名，使其恢复到默认的样式。通过使用 jQuery 的 addClass 和 removeClass 方法，我们可以轻松地实现 HTML 元素样式的添加和移除，从而实现动态交互效果。无论是为按钮添加特定的样式类名，还是切换菜单项的选中状态，这两个方法都能帮助我们快速实现所需的效果。希望本文对你理解和使用 jQuery 的 addClass 和 removeClass 方法有所帮助！