Webサイト制作でよく使うjQueryの基礎と使い方
Webサイト制作でよく使うjQueryの基礎と使い方をまとめました。
基礎を組み合わせるだけで、サイト制作で使われている様々な処理を実現できます。
実際の制作でどのように使うのか、サンプルと練習課題を用意しましたので、基礎を理解したら後はひたすらコーディングしながら学習していってください！
※練習課題は、随時追加していきます。
目次
jQueryの基礎
①：処理を実行する
$(function(){
// 実行したい処理
});
jQueryの処理を実行する場合は、「$(function(){ });」の中に処理を記述します。
HTML要素が読み込まれた後に実行されます。
②：HTMLの要素を指定する
・クラス名を指定する
$('.hello')
・ID名を指定する
$('#hello')
idとclassを指定する場合は、$(' ')で囲みます。
※ダブルクォーテーションで囲んでもOKです。
③：CSSを操作する
・「クラス名：hello」の color と font-size を変更する
$('.hello').css({
"color": "#000",
"font-size": "16px"
});
他のプロパティも同様の書き方で変更できます。
jQueryでCSSの操作ができるようになると、クリック時やスクロール時などにデザインを変更するような動的なサイトデザインができるようになります。
④：id、classを追加・変更・削除する
・idを追加する
// 「クラス名：hello」に「ID名：hello2」を追加する
//※既にidが存在する場合は、既存のid名がhello2に変更される
$('.hello').attr('id', 'hello2');
・idを変更する
// 「ID名：hello」を「ID名：hello2」に変更する
$('#hello').attr('id', 'hello2');
・idを削除する
// 「ID名：hello」を削除する
$('#hello').removeAttr('id');
・classを追加・変更する（attr）
// 「ID名：hello」に「クラス名：hello2」を追加する
// 既にクラスが設定されている場合はhello2に変更される
$('#hello').attr('class', 'hello2');
// 「ID名：hello」に「クラス名：hello2、hello3」を追加する
// 既にクラスが設定されている場合はhello2とhello3に変更される
$('#hello').attr('class', 'hello2 hello3');
・classを追加する（addClass）
// 「ID名：hello」に「クラス名：hello2」を追加する
$('#hello').addClass('hello2');
// 「ID名：hello」に「クラス名：hello2、hello3」を追加する
$('#hello').addClass('hello2 hello3');
・classを削除する（removeClass）
// 「ID名：hello」から「クラス名：hello2」を削除する
$('#hello').removeClass('hello2');
// 「ID名：hello」から「クラス名：hello2、hello3」を削除する
$('#hello').removeClass('hello2 hello3');
idの追加は「attr」で行いますが、クラスの追加は「attr」と「addClass」の2通りの方法があります。
※一般的にはaddClassが使われることが多いです。
⑤：要素の値を取得・変更する
・テキストを取得する
// 「クラス名：hello」のテキストを取得する
$('.hello').text();
・テキストを変更する
// 「クラス名：hello」のテキストを変更する
$('.hello').text('テキストテキストテキスト');
・valueを取得する
// 「input名：hello」のvalueを取得する
$('input[name="hello"]').val();
・valueを変更する
// 「input名：hello」のvalueを変更する
$('input[name="hello"]').val('テキストテキストテキスト');
・属性値を取得する
// imgタグに設定された「クラス名：hello」のsrcを取得する
$('.hello').attr('src');
・属性値を変更する
// imgタグに設定された「クラス名：hello」のsrcを変更する
$('.hello').attr('src', 'img/hello.jpg');
⑥：要素を表示・非表示にする
・要素を表示する
// 「クラス名：hello」を表示する
$('.hello').show();
・要素を非表示にする
// 「クラス名：hello」を非表示にする
$('.hello').hide();
・要素をフェードで表示する
// 「クラス名：hello」を0.5秒かけてフェードインする
$('.hello').fadeIn(500);
・要素をフェードで非表示にする
// 「クラス名：hello」を0.5秒かけてフェードアウトする
$('.hello').fadeOut(500);
・表示と非表示を切り替える
// 「クラス名：hello」が表示されている場合は非表示に、非表示の場合は表示する
$('.hello').toggle();
・表示と非表示をスライドで切り替える
// 「クラス名：hello」が表示されている場合はスライドして非表示に、非表示の場合はスライドして表示する
$('.hello').slideToggle();
・表示と非表示をフェードで切り替える
// 「クラス名：hello」が表示されている場合はフェードで非表示に、非表示の場合はフェードで表示する
$('.hello').fadeToggle();
⑦：イベント処理を実行する
・クリックされた時に実行する
// 「クラス名：hello」がクリックされた時に処理を実行する
$('.hello').on('click', function() {
// 処理
});
・値が変更された時に実行する
// 「クラス名：hello」の値が変更された時に処理を実行する
$('.hello').on('change', function() {
// 処理
});
・ページの読み込み後に実行する
$(window).on('load', function() {
// 処理
});
・スクロールした時に実行する
$(window).scroll(function() {
// 処理
});
・画面サイズが変更された時に実行する
$(window).resize(function() {
// 処理
});
⑧：プラグインを使う
Webサイト制作でよく使われるプラグインの一部を紹介します。
・カルーセルスライダー「slick」
カルーセルスライダーを作成するためのプラグインで、レスポンシブにも対応しています。
使い方が簡単で、オプションも豊富にそろっているのでカスタマイズもしやすいです。
※同じくカルーセルスライダーでよく使われるものとして「Swiper」というプラグインがあります。jQueryに依存しないのが特徴で、こちらもオプションが豊富にそろっているので使いやすいです。（バージョン5以降はIE対象外なので注意が必要です。）
使いやすさや要件にあわせて、好きな方を選択するのがよいかと思います。
・カレンダー「Datepicker」
フォームの日付フィールドにカレンダーを設置するためのプラグインです。
簡単に設置できる上に日本語化にも対応しているので、カレンダーを設置する際にはおすすめのプラグインです。
・要素の画面表示タイミングを取得「inview」
要素の画面表示タイミングを取得するためのプラグインです。
画面をスクロールした時に画像が画面下にきたらフェード表示する等でよく使用されています。
使い勝手の良いプラグインなので、覚えておくと便利です。
