jQueryで覚えるべき関数たち
「動くホームページが作りたい」「CSSの動きだけでは物足りなくなってきた」という人、jQueryを初めて触ってみる人向けに書いてます。
jQueryを学ぼうとすると、膨大なルールや関数の数に圧倒されませんか？
それもそのはず、HTMLやCSSなどのマークアップランゲージと違って、jQueryはjavascriptのライブラリで、その本質はプログラミング言語なんです。
整理されていないプログラミング言語の情報をバラバラと調べてると、あきらかに情報過多です。
何から学べばいいかわからなくなって混乱することでしょう。
なので、「これだけ覚えればある程度やりたいことができるだろう」っていう関数をご紹介します。
この記事で紹介するjQuery関数
このページでご紹介する関数は以下の通り
// イベント発生時に処理を実行する
$(element).on();
// classの操作
$(element).hasClass();
$(element).addClass();
$(element).removeClass();
$(element).toggleClass();
// 表示・非表示の切り替え
$(element).hide();
$(element).show();
$(element).slideUp();
$(element).slideDown();
$(element).slideToggle();
// 要素を追加・移動させる
$(element).append();
$(element).appendTo();
$(element).prepend();
$(element).prependTo();
// セレクタの条件に一致する要素に順番に処理を実行する
$(element).each();on()：イベント発生時に処理を実行する
まず、覚えるべきは「いつjQueryを動かすか」を決めるon関数です。
よく使うのはクリックイベントです。
<a id="button">ボタン</a>
<script>
// 要素「#button」がクリックされた
$('#button').on('click', function() {
// ここに処理を書く
});
</script>第1引数に「どのイベントが発生した時か」、第2引数に「どんな処理をするか」を入れます。
jQueryによるclassの操作
hasClass()：要素に特定のclassが付いているか確認する
要素に特定のclassが付いているか確認するにはhasClass()を使用します。
hasClassの使い方は以下の通り
<div id="text_area">テキストが入ります。</div>
<script>
// 要素「#text_area」にclass「text_area--green」が付いているか確認する
if ($('#text_area').hasClass('text_area--green')) {
// クラスが付いていた場合の処理
}
// 要素「#text_area」にclass「text_area--green」が付いていない場合のみ処理を実行する
if (!$('#text_area').hasClass('text_area--green')) { {
// クラスが付いていない場合の処理
}
// 要素「#text_area」にclass「text_area--green」が付いているか確認し、それぞれ処理を記述する場合
if ($('#text_area').hasClass('text_area--green')) {
// クラスが付いていた場合
} else {
// クラスが付いていない場合
}
</script>hasClass関数は戻り値が【true】か【false】の2択なので、if文の中で使用します。
そして、クラスが付いているか判定できたら、クラスと付けたり、消したりします。
addClass()：要素に指定したclassを付ける
classを付けるにはaddClass関数を使用します。
<div id="text_area">テキストが入ります。</div>
<script>
// 要素「#text_area」にclass「text_area--green」を付ける
$('#text_area').addClass('text_area--green');
</script>ただこれだけです。
removeClass()：要素に付いているclassを削除する
classを削除するにはremoveClass関数を使用します。
<div id="text_area" class="text_area--green">テキストが入ります。</div>
<script>
// 要素「#text_area」からclass「text_area--green」を削除する
$('#text_area').removeClass('text_area--green');
</script>使い方はaddClass関数とほぼ同じです。
要素にclassが付いているか確認して、classが無ければ付ける、classが付いていれば削除する
ここまでのclassの判定、付与、削除の3つだけで、以下のことができます。
- classが付いているか判定
- classが付いていれば、削除
- classが付いていなければ、classを付ける
<div id="text_area" class="text_area--green">テキストが入ります。</div>
<script>
// 要素「#text_area」にclass「text_area--green」が付いているか判定する
if ($('#text_area').hasClass('text_area--green')) {
$('#text_area').removeClass('text_area--green'); // class「text_area--green」を削除する
} else {
$('#text_area').addClass('text_area--green'); // class「text_area--green」を付与する
}
</script>これだけの処理で何が出来るかというと、クリックで開閉するアコーディオン機能が作れるようになります。
See the Pen hasClassとaddClassとremoveClassのみでアコーディオンを作る by Uilou (@uilou754) on CodePen.
でも、これもっと簡単に作ることができます。
toggleClass()：勝手にclassが付いていればclassを消す、classが付いていなければclassを付ける処理をしてくれる
<div id="text_area" class="text_area--green">テキストが入ります。</div>
<script>
// 要素「#text_area」のclass「text_area--green」を付けたり、外したり切り替える
$('#text_area').toggleClass('text_area--green');
</script>これだけで同じような処理が出来るようになります。
ただし、二ヵ所のclassを同時に変更する場合、ダブルクリックを高速に行うなどすると、それぞれの状態がバラバラになってしまう恐れがあります。
二ヵ所以上のclass・状態を一緒に変更する場合には、都度classの状態を確認した方が良いので、めんどうですが前者の方法を使いましょう。
jQueryを使って、表示・非表示を切り替える
上記の例では、CSSで開閉の動きを作って、classを切り替えることで、開閉の動きを作っていました。
しかし、jQueryには表示・非表示の動きを簡単に行うことができる関数が用意されています。
hide()：要素を非表示にする
要素を非表示に切り替えるにはhide()を使います。
<div id="text_area">テキストが入ります。</div>
<script>
// 要素「#text_area」を非表示にする
$('#text_area').hide();
</script>show()：非表示要素を表示する
先ほどのhide()やdisplay:none;によって、非表示になっている要素を表示するにはshow()を使います。
<div id="text_area" style="display: none;">テキストが入ります。</div>
<script>
// 要素「#text_area」を表示する
$('#text_area').show();
</script>先ほどのhide()とshow()を組み合わせることで、アコーディオンが作れますね。
でも、これでは一瞬で変わりすぎです。
アコーディオンっぽい動きにするにはアニメーションが必要です。
slideUp()：要素が閉じるようなアニメーションをしながら非表示になる
こちらもhide()と同じように要素を非表示化できる関数ですが、動きが異なります。
こちらのslideUp()は要素が下から潰されるように畳まれるアニメーションが行われ、最終的に非表示となります。
<div id="text_area">テキストが入ります。</div>
<script>
// 要素「#text_area」をクリックすると、要素が閉じて非表示化する
$('#text_area').on('click', function() {
$(this).slideUp();
});
</script>スマホのメニューやアコーディオンなどはこのslideUp()が使われていることがあります。
slideDown()：要素が開くようなアニメーションをしながら表示される
閉じる関数があるのだから、開く関数ももちろんあります。
<button class="open">開くボタン</button>
<div id="text_area">テキストが入ります。</div>
<script>
// 要素「#text_area」をクリックすると、要素が閉じて非表示化する
$('#text_area').on('click', function() {
$(this).slideUp();
});
// button.openをクリックすると、閉じた要素を開き直す
$('.open').on('click', function() {
$('#text_area').slideDown();
});
</script>関数名がslideDown()なので、想像は出来ると思うのですが、slideUp()とは逆に、上から広がるように要素が現れます。
slideToggle()：要素が非表示なら開くアニメーション、表示されていれば閉じるアニメーションを自動で行う
上記のアニメーションを１つの関数で行うことも出来ます。
<button class="open">開くボタン</button>
<div id="text_area">テキストが入ります。</div>
<script>
// button.openをクリックすると、#text_area要素が開閉する
$('.open').on('click', function() {
$('#text_area').slideToggle();
});
</script>開いている時にボタンをクリックすると要素が閉じ、要素が閉じている時にボタンをクリックすると要素が表示されます。
Javascriptを使って、DOMを操作する
append()、appendTo()：要素の末尾に追加する
jQueryでは、ページを表示後（DOM生成後）に、プログラムから要素を追加（動的に追加）することもできます。
その関数の一つがappend関数です。
<ul class="test">
<li>test01</li>
</ul>
<script>
$(function() {
$('.test').append('<li>test02</li>');
});
</script>上記のコードでは、ページが表示された後、test02がリストの末尾に追加されます。
append関数に似た関数でappendTo関数があります。
こちらは、関数の呼び出し元と引数が逆転します。
<ul class="test">
<li>test01</li>
</ul>
<script>
$(function() {
$('<li>test02</li>').appendTo('.test');
});
</script>このように、実行結果は同じになるんですが、呼び出し元と引数が逆転します。
ただし、このappendやappendToには注意点があり、「既に画面内にある要素を複製して、要素の末尾に入れよう」と思って、以下のような処理を書いた時
<ul class="test">
<li>test01</li>
<li>test02</li>
</ul>
<script>
$(function() {
$('.test').append($('.test > *:first-child'));
});
</script>これを実行すると、最初の要素が消えて、末尾に移動しているんですね。
つまり、追加対象にタグを書くと、それを追加してくれる。DOM要素を代入すると、その要素を移動させてくれる。という動きをします。
では、DOM要素を複製して追加したい時はどうするか？
clone()を使ってください。
<ul class="test">
<li>test01</li>
<li>test02</li>
</ul>
<script>
$(function() {
$('.test').append($('.test > *:first-child').clone(true));
});
</script>このように、clone関数で要素のクローンを作って、そのクローンを引数に入れることで、元のDOM要素は影響を受けなくなるんですね。
prepend()、prependTo()：要素の先頭に追加する
prepend関数もappend関数と同じです。追加先が末尾か先頭かの違いだけです。
<ul class="test">
<li>test01</li>
</ul>
<script>
$(function() {
$('.test').prepend('<li>test02</li>');
$('<li>test02</li>').prependTo('.test');
});
</script>条件に一致するタグが複数存在する場合、繰り返し処理を行う
each()：セレクタで対象となる要素が複数ある場合、一つ一つの要素に処理を実行する
例えば、以下のように各要素の状態が異なる時
<div class="alert">test</div>
<div class="alert alert--close">test</div>例えば、上記のように.alertの中で、.alert–closeにだけ処理を行いたい時
<script>
// .alertの要素を１つずつチェック
$('.alert').each(function(index) {
// .alert--closeが付いている場合
if ($(this).hasClass('.alert--close')) {
// .alert--closeを取り除く
$(this).removeClass('.alert--close');
}
});
</script>サンプルがあまり良くないですけど、each()を使う時はこのようにして使います。
引数のindexには「何番目の要素」という番号が入ります。
jQueryではアロー関数は使うな！
jQueryでは今まで記述してきたように、引数に関数を直接代入することがあります。
この時、直接代入するので、無名関数を使用します。
そこでちょっとJavascriptに詳しい人は「無名関数ならアロー関数を使えば良いじゃないか」と考える事でしょう。
しかし、jQueryではアロー関数を使うと、$(this)の参照がおかしくなるので、アロー関数を使うべきではありません。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。
