[ jQuery ] class 属性の操作には attr 関数ではなく addClass 関数を使う

ｊQuery には要素の属性を設定する attr 関数がありますが、class 属性については addClass 関数や removeClass 関数が別途用意されています。その違いや理由について検証してみます。

class 属性に値が設定されている HTML を考えて見ます。

HTML

<div class="class1 class2"></div>

attr 関数および addClass 関数で class 属性を追加する場合の設定サンプルを見てみます。

 /*
  * attr関数を使用する場合
  * 実際には一旦現在値を取得して、それに追加するだろう
  */
 $("div").attr("class", "class1 class2 addclass1");

 /*
  * addClass関数を使用する場合
  */
 $("div").addClass("addclass1");

サンプルの実行結果はいずれの場合も同じとなります。

<div class="class1 class2 addclass1"></div>

サンプルからもわかるように、attr 関数はすべてを一回で設定しなければいけませんが、 addClass や removeClass 関数では、一つずつ ( または スペースで区切って複数 ) 属性の追加と削除ができます。

同じ設定値は除外してくれる

同じ設定値を設定しようとすると、attr 関数ではそのまま設定されますが、addClass では意味のない重複を外してくれます。

 $("div").attr("class", "test test");
 // <div class="test test"></div>

 $("div").addClass("test test");
 // <div class="test"></div>

属性の設定値の確認 ( hasClass 関数 )

class 属性の設定値の存在を確認するために、hasClass 関数が用意されています。class 属性の内容はスペース区切りで複数の値が設定されることも多いので便利です。

    if($("#divid").hasClass("selected-class")){
    
    } else {

    }

このように、class 属性の使われ方を意識した動作となっているので、class 属性には専用の関数が用意されているのだと思います。また、検証しているわけではありませんが attr 関数よりも addClass 関数などの専用関数のほうが高速で動作するようです。