jQuery 添加类 - Javascript

在使用 jQuery 操作 DOM 元素时，我们可能需要动态地为某个元素添加或删除类。jQuery 提供了 .addClass() 和 .removeClass() 方法来实现这一功能。本文将介绍如何使用 jQuery 来添加类。

语法

.addClass() 方法用于为选定的元素添加一个或多个类。

$(selector).addClass(className);

其中，selector 为要选定的元素，可以是 HTML 元素、CSS 类或 ID；className 为要添加的类名，可以是一个或多个类名，多个类名之间用空格隔开。

示例

下面的示例演示了如何使用 .addClass() 方法为一个按钮添加类名 active：

$(document).ready(function() {
  $("button").click(function() {
    $(this).addClass("active");
  });
});

当按钮被点击时，该按钮会添加 active 类名，样式表中定义的样式会生效。

多个类名添加

可以同时为一个元素添加多个类名。下面的示例演示了如何为一个段落元素添加类名 small 和 blue：

$(document).ready(function() {
  $("p").addClass("small blue");
});

条件添加类名

可以根据某些条件来决定是否添加某个类名。下面的示例演示了如何为一个文本框添加 warning 类名，当文本框中的值为空时：

$(document).ready(function() {
  $("input[type='text']").blur(function() {
    if ($(this).val() == "") {
      $(this).addClass("warning");
    }
  });
});

总结

本文介绍了如何使用 jQuery 的 .addClass() 方法为元素添加类名。您可以根据需要添加一个或多个类名，还可以根据条件来决定是否添加类名。希望这篇文章能够帮助您更好地掌握 jQuery 的基础知识。