Question

在jquery中使用attr()而不是使用addClass()有什么好处？

Answer 1

当您使用attr方法设置任何元素的类时，它将覆盖现有的类名，并将您传递的任何值作为attr方法的第二个参数。

如果您使用addClass方法将任何类添加到元素，那么它将只添加该类并保留现有类。如果要添加的类已经存在，那么它将忽略它。

E.g。

<div id="div1" class="oldClass"></div>

使用$('#div1').attr('class', 'newClass')会给出

<div id="div1" class="newClass"></div>

使用$('#div1').addClass('newClass')时会给出

<div id="div1" class="oldClass newClass"></div>

因此，总是建议使用addClass / removeClass来使用jQuery来填充html元素类。但最终它取决于你的要求什么时候使用。

Answer 2

addClass()与使用attr('class')：

操纵类相比有几个好处

它在语义上更清晰。 addClass和removeClass操纵元素的class属性（或className属性），这是关于它。他们让代码骗你是一件困难的事。如果您说$whatever.addClas("selected")，则会出现运行时错误，而如果您说$whatever.attr('clas', 'selected')，则它似乎无法执行任何操作。不过，从JS的角度来看，它仍然“有效”，因为谁知道呢？您可以想要来设置clas属性。当你试图用瑞士军刀作为开罐器时就会发生这种情况。
它适用于多个类。如果您使用attr添加和删除CSS类，并且会有多个（实际上这很常见），你必须做一些字符串处理，以确保不打扰任何其他应用类或重复相同的类50次。 addClass和removeClass为您做到这一点。
显然速度要快得多。

我无法真正想到attr('class'...)对addClass的任何好处。通常，attr适用于没有其他内置方法来操作属性的情况。在这种情况下，你应该使用它。

Answer 3

attr（a，b）将元素的“a”属性设置为“b”。

addClass（a）将“a”类添加到元素

例如......

<强> HTML

<div id="box" class="myClass"></div>

<强>脚本

$("#box").attr("class", "myOtherClass");

<强>结果

<div id="box" class="myOtherClass"></div>

和...

<强> HTML

<div id="box" class="myClass"></div>

<强>脚本

$("#box").addClass("myOtherClass");

<强>结果

<div id="box" class="myClass myOtherClass"></div>

jQuery链接：

Answer 4

.addClass()对性能的影响要大得多。

我最喜欢的文章之一。

Answer 5

attr()的唯一好处我知道它是否适用于SVG，addClass()没有。