【jQuery】クラス名を操作するメソッド4つまとめ

クラス名を操作するメソッド4つまとめ

この記事を読むとクラス名(class)を操作する4つのjQueryメソッドを一気に覚えることができます。

クラス名の操作はよく使う上に内容も簡単なので、初心者向けです。

全てclassが入っているので名前自体も覚えやすいのでぜひ使ってみてください。

スポンサーリンク

クラス名を追加するaddClass

まず最初は特定の要素にクラス名を追加する時に使うメソッドです。

addClassというメソッドを使うと追加ができます。addは英語で「加える」という意味なので、そのままですね。

$("h1").addClass("sample");

例を書いてみましたが、この場合は「h1の要素にsampleという名前のクラス名を追加する」という処理をすることができます。

かっこの中に追加したいクラス名を入れてあげるだけですね。ちなみにかっこの中はクラス名だからといってドットを入力する必要はないので注意です。名前だけ入れれば大丈夫です。

クラス名を削除するremoveClass

追加ができるなら、やっぱり削除もしたいところ。

クラス名を削除する時はremoveClassというメソッドを使います。removeは英語で「削す」という意味なので、これもそのままです。説明してるのが悲しくなるぐらいそのまま・・・。

$("h1").removeClass("sample");

さっきと同じ例で今度はremoveClassを使って書いてみました。

この場合は「h1の要素からsampleというクラス名を削除する」という処理になります。

クラス名の存在を判定するhasClass

追加、削除ができたら今度は「要素に指定したクラス名があるか」をメソッドで判定することもできます。

その時はhasClassというメソッドを使います。

jQueryのifを使った条件分岐の方法【初心者向け】

で条件分岐ができるifについて説明しましたが、ifと組み合わせて使うことで「もし(要素)に(クラス名)があったら」といった条件が作れます。

$("h1").hasClass("sample");

同様の例を使ってhasClassに書き換えてみました。

この場合は「h1の要素にsampleというクラス名があるか」という処理になります。if文と組み合わせると

if($("h1").hasClass("sample")){
    // sampleというクラス名があった時の処理
} else{
   // sampleというクラス名がなかった時の処理
}

こんな感じで、特定のクラス名があった時・なかった時で処理を切り分けることができます。

追加・削除の両方を兼ね備えたtoggleClass

追加と削除にはaddClassとremoveClassを使いますが、両方を兼ね備えたtoggleClassというものがあります。今回紹介する最後のメソッドです。

toggleClassを使うと、特定の要素にクラス名がある場合は削除し、ない場合は追加してくれます。

$("a").click(function(){
   $(this).toggleClass("on");
});

例としてこんなサンプルを書いてみました。

1行目では「a要素(リンク)をクリックしたら」という内容です。2行目では「クリックした時に、a要素にonというクラス名を追加or削除する」という処理になっています。

もしクリックした時にa要素にonというクラス名がなければ追加され、あれば削除されるようになります。これを利用して、onというクラス名をCSS側で色々設定すればクリック時にリンク要素の見た目を変えたりできますね。

4つ覚えるだけでもできることが格段に増える!

ここで紹介したら4つは初心者の方でも覚えると格段にできることが増えると思います。

ぜひjQuery初心者の方でもどんどん使ってみてください。

スポンサーリンク

SNS・feed登録はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です