Преимущества использования attr () перед addClass в jquery

Question

Каковы преимущества использования attr() вместо использования addClass() в jquery?

Answer 1

Когда вы используете метод attr для установки класса любого элемента, он заменит существующее имя класса на любое значение, которое вы передадите в качестве второго аргумента методу attr.

Где, как если бы вы использовали метод addClass для добавления любого класса к элементу, он просто добавит класс, а также сохранит существующие классы. Если добавляемый класс уже существует, он просто игнорирует его.

1008 * Е.Г. *

<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 для манипулирования классами html-элементов с помощью jQuery. Но в конечном итоге это зависит от ваших требований, что использовать, когда.

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 Ссылки:

http://api.jquery.com/attr/

http://api.jquery.com/addClass/

Answer 4

.addClass() НАМНОГО лучше для производительности.

Ознакомьтесь с этим руководством по производительности jQuery: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

Одна из моих любимых статей.

Answer 5

Единственное преимущество attr() Я знаю, если он работает с SVG, addClass() нет.

В этом ответе есть детали https://stackoverflow.com/a/10257755/2393562