web-dev-qa-db-ja.com

jqueryでaddClassよりもattr（）を使用する利点

Jqueryでattr()を使用する代わりにaddClass()を使用する利点は何ですか？

jqueryaddclass
11
Steffan Harris

attrメソッドを使用して要素のクラスを設定すると、既存のクラス名がattrメソッドの2番目の引数として渡した値で上書きされます。

addClassメソッドを使用して要素にクラスを追加する場合と同様に、クラスを追加するだけで、既存のクラスも保持されます。追加するクラスがすでに存在する場合は、それを無視します。

例えば。

_<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>
_

したがって、jQueryを使用してhtml要素のクラスを操作するには、常にaddClass/removeClassを使用することをお勧めします。しかし、最終的には、いつ何を使用するかは要件によって異なります。

28
ShankarSangoli

addClass()には、attr('class')でクラスを操作するよりもいくつかの利点があります。

  • 意味的に明確です。addClassとremoveClassは要素のclass属性（またはclassNameプロパティ）を操作します。それだけです。彼らがあなたにコードを嘘をつくようにするのはもう少し難しいです。 $whatever.addClas("selected")と言った場合、ランタイムエラーが発生しますが、$whatever.attr('clas', 'selected')と言った場合、何も実行されていないように見えます。しかし、JSの観点からは、それでも「機能」します。誰が知っているのでしょうか。 clas属性を設定したいwant。スイスアーミーナイフを缶切りとして使おうとすると、そういうことが起こります。

  • 複数のクラスで機能します。attrを使用してCSSクラスを追加および削除し、複数のクラスが存在する場合（実際にはかなり一般的です）、次のようになります。他の適用されたクラスを妨害したり、同じクラスを50回繰り返したりしないように、文字列処理を実行します。 addClassとremoveClassがあなたに代わってそれを行います。

  • 明らかにはるかに高速です。

addClassに対するattr('class'...)の利点については本当に考えられません。一般に、attrは、属性を操作するための他の組み込みの方法がない場合に使用します。この場合はそうするので、おそらくそれを使用する必要があります。

6
cHao

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/

2
Mikey G

.addClass()はパフォーマンスがはるかに優れています。

JQueryのパフォーマンスに関するこのガイドを確認してください： http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

私のお気に入りの記事の1つ。

1
alt

attr()の唯一の利点は、SVGで機能することですが、addClass()は機能しません。

この回答にはいくつかの詳細があります https://stackoverflow.com/a/10257755/2393562

0
Sauce