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>

在这个例子中，我们有一个HTML元素，ID为 “element”，类为 “existing-class”。当文档准备好后，我们使用jQuery的$(“#element”)选择器选择该元素，并使用attr()方法将 “new-class “类添加到该元素的现有类别中。

你可以在浏览器的开发工具上查看该元素的类是 “existing-class new-class”。