jQuery 如何不使用addClass()方法为一个元素添加类

我们可以使用.attr()方法来给一个元素添加一个类。这个方法可以用来设置或获取一个HTML元素上的属性值。要添加一个类，我们首先使用jQuery选择器选择元素，然后调用.attr()方法，传入 “class “作为第一个参数，类名作为第二个参数。

让我们首先了解一下什么是jQuery。jQuery是一个JavaScript库，它简化了HTML文档的遍历、事件处理和动画。它允许对文档对象模型（DOM）进行简单的操作。

它还为常见的JavaScript任务提供了几种速记方法，如进行AJAX请求。它被广泛用于网络开发，以创建互动和动态的用户界面。它可以很容易地与其他库和框架集成。

方法

在jQuery中，你可以通过使用addClass()方法为一个元素添加一个类，但你也可以使用attr()或prop()方法为一个元素添加一个类。

例如 –

$("#element").attr("class", "new-class");

或

$("#element").prop("class", "new-class");

这将把 “new-class “类添加到ID为 “element “的元素上。

你也可以用+=操作符将多个类名连在一起

$("#element").attr("class", function(i, origValue){
   return origValue + " new-class";
});

例子

下面是一个完整的例子，为一个ID为 “element “的元素添加一个 “new-class “类，而不删除任何现有的类。

<!DOCTYPE html>
<html>
<head>
   <title>Adding Class</title>
</head>
<body>
   <div id="element" class="existing-class">This is an element</div>
   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
   <script>
      (document).ready(function(){("#element").attr("class", function(i, origValue){
            return origValue + " new-class";
         });
      });
   </script>
</body>
</html>