この記事では、jQueryを使ってHTMLの要素に対してクラスの操作を行っていきます。
Webサイトにアニメーションを起こす上で、クラスの操作の学習は必要不可欠です。
まずは「どんなことができるのか」と言う部分に着目して学習を進めていきましょう。
目次
jQueryを使ってクラスの操作を行う
まず初めに、jQueryを使用してクラスの操作を行うイメージをつかんでいきましょう。
クラスを変更する例
クラスの操作のイメージを掴むために、例をご用意いたしました。
こちらは、テキストをクリックした際に、テキストの色を変更する例となります。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
<p class="sample-text">クリックするとクラスが変わります。</p>まずは、通常状態のテキストを用意します。
/* 変更前のスタイル */
.sample-text {
color: #333;
font-size: 24px;
font-weight: bold;
}
/* 変更後のスタイル */
.sample-text.active {
color: #ffbb1e;
}次にスタイルを当てていきましょう。
CSSにスタイルを変更したい状態をあらかじめ記述しておきます。
$(".sample-text").click(function () {
//クラスを追加する処理
$(".sample-text").addClass("active");
});最後にjQueryを利用して、テキストをクリックした際にクラスが追加される処理を作ります。
今回の例では、テキストをクリックした際にaddClass()が作動ます。
「.sample-text」というクラス名を持つ要素に対してactiveと言うクラス属性の値が追加されます。
クラスが新たに追加されたことにより、先ほどの例の「変更後のスタイル」の箇所が適用されるようになりました。
クラスの操作はアニメーションの基本
以上のようにして、クラスを追加することによってスタイルを変更することができるのです。
jQueryの簡単なアニメーションは基本的にクラスの付け替えで対応できるものが多いです。
なので、今回の記事でクラスの操作についてマスターしていきましょう。
jQueryのクラスの操作方法
少しイメージがつかめたところで、実際にどんなクラスの操作ができるのかをみていきましょう。
addClass()でクラスを追加する
最初に紹介するものは、先ほどの例でも出てきたaddClass()です。
$(".sample").addClass("active");addClass()はセレクタに対しクラスを追加します。
removeClass()でクラスを削除する
次に紹介するものは、removeClass()です。
$(".sample").removeClass("active");removeClass()はセレクタに対し該当するクラスを削除します。
<p class="sample active">例2です。クラスを消します。:(</p>上記のような状態の要素からactiveクラスを削除する処理を行います。
hasClass()でクラスの有無を確認する
次は、hasClass()を見ていきましょう。
$(".sample").hasClass("active");hasClass()は、セレクタに対し該当するクラス名が存在するかを確認します。
<p class="sample active">例3です。クラスがあるか確認するよ。:)</p>上記のような状態の要素で存在した場合、hasClass()はtrueの値を返します。
反対に、該当するクラスが存在しなかった場合にはfalseの値を返します。
toggleClass()でクラスの追加・削除を行う
最後にtoggleClass()の確認です。
$(".sample").toggleClass("active");toggleClass()は、セレクタに対し該当するクラス名が存在するかを確認します。
<p class="sample">例4-1です。クラスをつけます。:)</p>上記のような状態の要素であれば、toggleClass()はactiveを追加します。
<p class="sample active">例4-2です。クラスを消します。:(</p>また、上記のような状態であれば、toggleClass()はactiveを削除します。
ハンバーガーメニューのメニューの開閉を切り替える際にもよく使用するメソッドなので覚えておきましょう。
クラスの操作はよく使う
ここまで、jQueryを用いてクラスを操作する方法を学んできました。
前述しましたが、Webサイトのアニメーションを実装する際に、 クラス操作はよく利用します。
今回紹介したメソッドは必ずマスターしておきましょう。
