【jQuery】クラスの追加や削除などのメソッド一覧と使い方

jQueryのクラスを操作するメソッド

こちらではjQueryのメソッドのうち、クラスの追加や削除などをするメソッドについて解説しています。

クラスの取得や設定をするメソッド

jQueryのクラスの取得や設定、追加、削除などをするメソッドを表にまとめました。

メソッド 解説
attr(‘class’) 属性名を’class’とすることでクラスの値を取得する。
addClass(name) nameで指定されたクラスを追加する
removeClass([name]) nameで指定されたクラスを削除する。nameが指定されない場合は全てのクラスを削除。
toggleClass(name) nameで指定したクラスが設定されていれば削除し、設定されていなければ追加する。
toggleClass(name, switch) switchがtrueならnameで指定したクラスを追加し、falseなら削除する。
hasClass(name) nameで指定したクラスを持っている場合はtrueを返し、無い場合はfalseを返す。

attr('class')

attr(name)はnameという属性の値を取得するメソッドです。nameを'class'とすることで、現在設定されているクラスを取得できます。

attr('class')の使い方

<img class="pic" src="1.jpg" alt="画像1">

上記のHTMLにおいて

var a = $('img').attr('class');

とするとaの値はpicとなります。

addClass(name)

選択した要素に対して、nameで指定されたクラスを追加(付加)します。

addClass(name)の使い方

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

上記のHTMLにおいて

$('#apple').addClass('red');

とすると

<ul>
	<li id="apple" class="red">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

となります。

removeClass([name])

選択した要素からnameで指定したクラスを削除します。

nameが指定されない場合は、選択した要素に設定されている全てのクラスを削除します。

removeClass([name])の使い方

nameを指定した場合と、指定しない場合の例を紹介します。まずはnameを指定した例から。

<p id="apple" class="fruit red">りんご</p>

上記のHTMLにおいて

$('#apple').removeClass('red');

とすると

<p id="apple" class="fruit">りんご</p>

となります。

次にnameを指定しない例です。

<p id="apple" class="fruit red">りんご</p>

上記のHTMLにおいて

$('#apple').removeClass();

とすると

<p id="apple" class="">りんご</p>

となり、クラスが全て削除されます。

toggleClass(name)

選択した要素に対して、nameで指定したクラスが設定されていれば削除し、設定されていなければ追加します。

toggleClass(name)の使い方

<p id="apple" class="fruit">りんご</p>

上記のHTMLにおいて

$('#apple').toggleClass('red');

とすると

<p id="apple" class="fruit red">りんご</p>

となります。

もう一度実行すると

<p id="apple" class="fruit">りんご</p>

となります。

toggleClass(name, switch)

選択した要素に対して、switchがtrueならnameで指定したクラスを追加し、falseなら削除します。

hasClass(name)

選択した要素がnameで指定したクラスを持っている場合はtrueを返し、無い場合はfalseを返します。

hasClass(name)の使い方

<ul>
	<li id="apple" class="red">りんご</li>
	<li id="orange" class="orange">みかん</li>
	<li id="melon" class="green">メロン</li>
</ul>

上記のHTMLにおいて

var a = $('#apple').hasClass('red');

とするとaの値はtrueとなります。

[prism]