JS jQueryでクラスの操作（付与・削除…etc）

2020-05-07

サイト制作において、jQueryによる操作は必要になってくると思いますが、その際、クラスの操作がよく使用されるので、その一部を記述していきます。

classの追加

まずは、クラスの追加です。
例えば、下記のような p要素に対して処理をすることになります。
addClass()という記述を使用することで、クラスを追加する事ができます。

//    処理前
<p>テキスト</p>

$('p').addClass('text');

//    処理後
<p class="text">テキスト</p>

// 処理前

テキスト

$('p').addClass('text');

// 処理後

テキスト

次に、クラスの削除です。
こちらは、既にクラスが付与されている状態の要素に対して、removeClass()によって、クラスを削除できます。

//    処理前
<p class="delete">テキスト</p>

$('p').removeClass('delete');

//    処理後
<p class="">テキスト</p>

// 処理前

テキスト

$('p').removeClass('delete');

// 処理後

テキスト

上記の内容は、$(function() { });内で記述するだけで、動作しますが、ページを読み込んだ際に実行されるので、実行のタイミングがイマイチかもしれません。
そんなときには、任意のタイミングで、実行させたい方法として、要素がクリックされたときに、実行するという方法があります。

$('p').click(function() {
    $('p').addClass('text');
});

$('p').click(function() {

$('p').addClass('text');

});

と、このように記述することで、要素がクリックされたタイミングで、‘text’というクラスが追加されます。
そして、p.textに対して、CSSで設定しておくことで、変化をつけたりする事ができます。