在 jquery 中使用 attr() 而不是 addClass 的好处
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9090991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Benefits of using attr() over addClass in jquery
提问by Steffan Harris
What are the benefits of using attr()instead of using addClass()in jquery?
在 jquery中使用attr()而不是使用有什么好处addClass()？
回答by ShankarSangoli
When you use attrmethod to set the class of any element it will override the existing class name with whatever value you pass as the second argument to attrmethod.
当您使用attrmethod 设置任何元素的类时，它将使用您作为第二个参数传递给attrmethod 的任何值覆盖现有的类名。
Where as if you use addClassmethod to add any class to an element it will just add the class and also retain the existing classes. If the class to add already exists then it will just ignore it.
就像您使用addClass方法将任何类添加到元素一样，它只会添加类并保留现有类。如果要添加的类已经存在，那么它只会忽略它。
E.g.
例如
<div id="div1" class="oldClass"></div>
Using $('#div1').attr('class', 'newClass')will give
使用$('#div1').attr('class', 'newClass')会给
<div id="div1" class="newClass"></div>
Where as using $('#div1').addClass('newClass')will give
在哪里使用$('#div1').addClass('newClass')会给
<div id="div1" class="oldClass newClass"></div>
So it is always adviseable to use addClass/removeClassto manupulate classes of html elements using jQuery. But at the end it depends on your requirement what to use when.
因此，始终建议使用addClass/removeClass使用 jQuery 来处理 html 元素的类。但最终取决于您的要求何时使用什么。
回答by cHao
addClass()has several benefits over manipulating the class with attr('class'):
addClass()与操作类相比有几个好处attr('class')：
It's semantically clearer.
addClassandremoveClassmanipulate the element'sclassattribute (orclassNameproperty), and that's about it. It's a little more difficult for them to make the code lie to you. If you said$whatever.addClas("selected"), you'd get a runtime error, whereas if you said$whatever.attr('clas', 'selected'), it just wouldn't appear to do anything. It'd still "work" from JS's point of view, though, because who knows? You could wantto set aclasattribute. That's the kind of thing that happens when you try to use a Swiss army knife as a can opener.It works with multiple classes.If you use
attrto add and remove CSS classes, and there will ever be more than one (which is rather common, actually), you'd have to do some string processing to make sure not to disturb any other applied classes or have the same class repeated 50 times.addClassandremoveClassdo that for you.It's apparently a lot faster.
它在语义上更清晰。
addClass并removeClass操纵元素的class属性（或className属性），仅此而已。他们让代码对你说谎有点困难。如果你说$whatever.addClas("selected")，你会得到一个运行时错误，而如果你说$whatever.attr('clas', 'selected')，它似乎不会做任何事情。不过，从 JS 的角度来看，它仍然“有效”，因为谁知道呢？您可能想要设置一个clas属性。当您尝试使用瑞士军刀作为开罐器时，就会发生这种情况。它适用于多个类。如果您使用
attr添加和删除 CSS 类，并且永远不会有多个（实际上很常见），则必须进行一些字符串处理以确保不会干扰任何其他应用的类或具有相同的课重复50次。addClass并removeClass为你做到这一点。显然快了很多。
I can't really think of any benefits of attr('class'...)over addClass. Generally, attris for when you don't have some other built-in way to manipulate the attribute. In this case you do, so you should probably use that.
我真的想不出attr('class'...)over的任何好处addClass。通常，attr用于当您没有其他内置方式来操作属性时。在这种情况下，您应该这样做，因此您可能应该使用它。
回答by Mikey G
attr(a,b) sets an element's "a" attribute to "b".
attr(a,b) 将元素的“a”属性设置为“b”。
addClass(a) adds the "a" class to an element
addClass(a) 将“a”类添加到元素
for example...
例如...
Html
html
<div id="box" class="myClass"></div>
Script
脚本
$("#box").attr("class", "myOtherClass");
Result
结果
<div id="box" class="myOtherClass"></div>
And...
和...
Html
html
<div id="box" class="myClass"></div>
Script
脚本
$("#box").addClass("myOtherClass");
Result
结果
<div id="box" class="myClass myOtherClass"></div>
jQuery Links:
jQuery 链接：
回答by alt
.addClass()is MUCH better for performance.
.addClass()性能要好得多。
Check out this guide to jQuery performance: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/
查看本 jQuery 性能指南：http: //net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/
One of my favorite articles.
我最喜欢的文章之一。
回答by Sauce
The only benefit of attr()I know if is that it works with SVG, addClass()does not.
attr()我知道的唯一好处是它可以与 SVG 一起使用，addClass()而不是。
This answer has some details https://stackoverflow.com/a/10257755/2393562
