Ventajas de usar attr() sobre addClass en jquery

Question

¿Cuáles son los beneficios de usar attr() en lugar de usar addClass() en jquery?

Answer 1

Cuando utiliza el método attr para establecer la clase de cualquier elemento, anulará el nombre de clase existente con cualquier valor que pase como segundo argumento al método attr.

Donde si usa el método addClass para agregar cualquier clase a un elemento simplemente agregará la clase y también conservará las clases existentes. Si la clase para agregar ya existe, entonces simplemente la ignorará.

E.g.

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

Usando $('#div1').attr('class', 'newClass') dará

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

Donde como el uso de $('#div1').addClass('newClass') dará

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

lo que siempre es adviseable utilizar addClass/removeClass a manupulate clases de elementos HTML usando jQuery. Pero al final depende de su requerimiento qué usar cuando.

Answer 2

attr (a, b) establece el atributo "a" de un elemento en "b".

addClass (a) se suma la "a" a la clase un elemento

por ejemplo ...

HTML

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

Guión

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

Resultado

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

Y ...

HTML

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

Guión

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

Re Enlaces sultado

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

jQuery:

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

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

Answer 3

.addClass() es mucho mejor para el rendimiento.

Compruebe hacia fuera esta guía para el rendimiento de jQuery: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

Uno de mis artículos favoritos.

Answer 4

addClass() tiene varias ventajas sobre la manipulación de la clase con attr('class'):

• Es semánticamente más clara.addClass y removeClass manipulan el atributo class del elemento (o propiedad className), y eso es todo. Es un poco más difícil para ellos hacer que el código te mienta. Si dijo $whatever.addClas("selected"), obtendría un error de tiempo de ejecución, mientras que si dijo $whatever.attr('clas', 'selected'), simplemente no parece hacer nada. Aún así "funcionaría" desde el punto de vista de JS, porque ¿quién sabe? Puede querer para establecer un atributo clas. Ese es el tipo de cosas que sucede cuando intentas usar una navaja suiza como abrelatas.

• Funciona con múltiples clases. Si usa attr para agregar y eliminar clases CSS, y alguna vez habrá más de una (lo cual es bastante común, en realidad), tendría que hacer un procesamiento de cadenas para asegurarse de no molestar a ninguna otra clase aplicada o tener la misma clase repetida 50 veces. addClass y removeClass hacen eso por usted.

• Aparentemente es mucho más rápido.

Realmente no puedo pensar en ningún beneficio de más de attr('class'...)addClass. Generalmente, attr es para cuando no tiene otra forma incorporada de manipular el atributo. En este caso lo haces, por lo que probablemente deberías usar eso.

Answer 5

El único beneficio de attr() Sé si es que funciona con SVG, addClass() no.

Esta respuesta tiene algunos detalles https://stackoverflow.com/a/10257755/2393562