こちらでは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
となります。