Avantages de l'utilisation d'attr() sur addClass en jquery

Quels sont les avantages de l'utilisation de attr() au lieu d'utiliser addClass() en jquery?

Exécuter des tests vous-même: jsperf.com/jquery-addclass-vs-attr-class
La Performance, tandis que parfois important, n'est pas le seul facteur décisif de ce qui est "bon" ou "mauvais". La question sans doute l'interroge au sujet des avantages de toute nature, et pas seulement speedwise.
Pour moi, c'est addClass qui est plus rapide sur jsperf.com... C'est pour la bonne cause, j'ai toujours utilisé addClass, j'avais peur de tout changer :-p

OriginalL'auteur Steffan Harris | 2012-02-01

  1. 27

    Lorsque vous utilisez attr méthode pour définir la classe de n'importe quel élément il va remplacer le nom de la classe à n'importe quelle valeur que vous passez le deuxième argument de attr méthode.

    Si vous utilisez addClass méthode pour ajouter de la classe à un élément, il suffit d'ajouter la classe et de conserver également les classes existantes. Si la classe d'ajouter existe déjà, alors il sera de simplement l'ignorer.

    E. g.

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

    À l'aide de $('#div1').attr('class', 'newClass') donnera

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

    Où que l'utilisation de $('#div1').addClass('newClass') donnera

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

    Donc, il est toujours conseillé d'utiliser addClass/removeClass à manupulate classes d'éléments html à l'aide de jQuery. Mais à la fin cela dépend de votre exigence qu'à utiliser lors de l'.

    OriginalL'auteur ShankarSangoli

  2. 5

    addClass() a plusieurs avantages sur la manipulation de la classe avec attr('class'):

    • Il est sémantiquement plus clair. addClass et removeClass manipuler l'élément class attribut (ou className de la propriété), et c'est à ce sujet. C'est un peu plus difficile pour eux de faire le code vous mentir. Si vous avez dit $whatever.addClas("selected"), vous obtiendrez une erreur d'exécution, alors que si l'on dit $whatever.attr('clas', 'selected'), il a juste ne semble pas faire quoi que ce soit. Il avait encore le "travail" de JS point de vue, cependant, parce que qui sait? Vous pourriez voulez pour définir un clas attribut. C'est le genre de chose qui se passe lorsque vous essayez d'utiliser un couteau de l'armée Suisse comme un ouvre-boîte.

    • Il fonctionne avec plusieurs classes. Si vous utilisez attr pour ajouter et supprimer des classes CSS, et il n'y aura jamais plus d'un (ce qui est plutôt commun, en fait), que vous avez à faire certains de la chaîne de traitement pour s'assurer de ne pas déranger les autres classes ou de la même classe répété 50 fois. addClass et removeClass le faire pour vous.

    • C'est apparemment beaucoup plus rapide.

    Je ne peux pas vraiment penser à des prestations de attr('class'...) sur addClass. Généralement, attr est pour quand vous n'avez pas un autre moyen intégré pour manipuler l'attribut. Dans ce cas, vous le faites, alors vous devriez probablement utiliser.

    OriginalL'auteur cHao

  3. 2

    attr(a,b) définit un élément "a" de l'attribut "b".

    addClass () ajoute la classe "a" à un élément

    par exemple...

    Html

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

    Script

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

    Résultat

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

    Et...

    Html

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

    Script

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

    Résultat

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

    jQuery Liens:

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

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

    OriginalL'auteur Mikey G

  4. 1

    .addClass() est BEAUCOUP mieux pour la performance.

    Lisez ce guide pour jQuery performance: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

    L'un de mes articles préférés.

    OriginalL'auteur alt

  5. 0

    Le seul avantage de attr() je sais s'est qu'il fonctionne avec SVG, addClass() ne pas.

    Cette réponse a certains détails https://stackoverflow.com/a/10257755/2393562

    OriginalL'auteur Sauce