jquery 如何动态添加、删除class样式方法介绍

当需要经常改变页面元素的样式时，动态添加、删除class样式是一种非常实用的方法。jQuery提供了方便的方法来实现这一功能：.addClass()和.removeClass()。

1. 添加类名

为HTML元素添加类名，可以使用.addClass()方法。

$(selector).addClass(className);

其中，selector是需要添加类名的元素选择器，className是需要添加的类名。

下面是一个示例，当鼠标放在元素上时，添加一个类名，当鼠标移出时，删除该类名。

<div id="box">鼠标悬停上去添加类名</div>

$('#box').mouseenter(function() {
    $(this).addClass('highlight');
}).mouseleave(function() {
    $(this).removeClass('highlight');
});

在上面的示例中，$('#box')选择了<div>元素，并添加了mouseenter和mouseleave事件处理程序。当鼠标放在元素上时（mouseenter事件），使用.addClass('highlight')方法为该元素添加highlight类名。当鼠标移出元素（mouseleave事件），使用.removeClass('highlight')方法从该元素上移除该类名。

2. 删除类名

如果你需要从元素中删除一个或多个类名，则可以使用.removeClass()方法：

$(selector).removeClass(className);

其中，selector是需要删除类名的元素选择器，className是需要删除的类名。

下面是一个删除类名的示例，当点击一个元素时，删除该元素的特定类名。

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<button class="btn highlight">我需要删除 highlight 类名</button>

$('button').click(function() {
    $(this).removeClass('highlight');
});

在这个示例中，当用户单击按钮时，使用.removeClass('highlight')方法从该元素上移除highlight类名，导致该元素的样式变得普通而无特殊标志。

3. 切换类名

在某些情况下，您可能需要切换HTML标记的一个或多个类名。例如，在单击一个按钮时切换显示和隐藏一个HTML元素，并在元素显示时添加一个类名，隐藏时删除该类名。

在这种情况下，您可以使用.toggleClass()方法：

$(selector).toggleClass(className);

这个方法将为选择器中的元素切换指定类名。如果该元素目前没有该类名，则添加该类名；否则，删除该类名。

下面是一个示例，通过单击按钮切换<div>元素的可见性，并在元素可见时添加特定类名。

<style>
  .toggle {
    display: none;
  }
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<button>切换可见性并添加 highlight 类名</button>
<div class="toggle">我需要显示或隐藏，并添加 highlight 类名</div>

$('button').click(function() {
    $('div.toggle').toggleClass('highlight').toggle();
});

在这个示例中，当用户单击按钮时，使用.toggleClass('highlight')方法切换<div>元素上的highlight类名，导致该元素的背景变成黄色且加粗。接着，使用.toggle()方法切换该元素的可见性，使其显示或隐藏。

通过这些方法，您可以在动态添加、删除和切换类名的同时，更改HTML元素的样式，从而为用户提供更好的用户体验。