jQueryの準備
jQueryの読み込み
jQueryを使用するには、下記のようにjQueryライブラリを読み込む必要があります。
<!-- index.html --> <head> <script type="https://...jquery.min.js"></script> </head>
jQueryファイルの読み込み
jQueryは、.js形式のファイルで保存し、下記のようにbodyの直前に書くことで、WEBページの表示速度をより早めることができます。
<!-- index.html --> <head> : </head> <body> : <script type="script.js"></script> <!-- bodyの終了タグの直前で読み込む --> </body>
jQueryの型
jQueryはHTMLの中身を操作するため、HTMLの読み込みが完了してからjQueryによる操作を開始するようにします。その為にはreadyイベントを使用し、$(document).ready()の中にjQueryの処理を書いていきます。 この構文には省略形も用意されています。
// script.js
// jQueryの基本的な型
$(document).ready(function(){
// この中にjQueryを記載する
});
// readyイベントの省略
$(function(){
// この中にjQueryを記載する
});
モーダル
モーダルとは、clickイベントなどに基づいて表示/非表示が行われる要素のことです。
モーダルの表示
/* stylesheet.css */
.login-modal-wrapper {
:
display: none; /* ①モーダルをCSSで非表示に */
}
// script.js
$('#login-show').click(function(){ // ②ログインボタンにclickイベントを設定
$('#login-modal').fadeIn(); // ③clickイベントでモーダルを表示
});
新規登録のモーダルを表示
①新規登録のボタンに共通のclass名「signup-show」を指定
<!-- index.html --> <div class="top-wrapper"> : <a href="#" class="btn signup signup-show"></a> : </div> <div class="message-wrapper"> : <span class="btn message signup-show"></span> : </div>
②fadeInメソッドで新規登録のモーダルを表示する
// script.js
$('.signup-show').click(function(){
$('#signup-modal').fadeIn();
});
モーダルを隠す
// script.js
// ①閉じるボタンにclickイベントを設定
$('.close-modal').click(function(){
});
// ②fadeOutメソッドでモーダルを隠す
$('.close-modal').click(function(){
$('#login-modal').fadeOut();
});
2つのモーダルを隠す
ログインと新規登録の2つのモーダルがあるので、これらを閉じるボタンは共通のものを使います。
①ログインと新規登録のモーダルに共通のclass名を指定
<!-- index.html --> <div id="signup-modal"> : <div class="close-modal"></div> : </div> <div id="login-modal"> : <div class="close-modal"></div> : </div>
②fadeOutメソッドでログインと新規登録のモーダルを隠す
// script.js
$('.close-modal').click(function(){
$('#signup-modal').fadeOut();
$('#login-modal').fadeOut();
});
hover機能
hoverイベントを使って、レッスンのアイコンにマウスが乗った時にだけ、レッスンの紹介文が表示されるようにしていきます。
hoverイベントの準備
①class名「lesson-hover」を追加
<!-- index.html --> // 各言語に対して、lesson-hoverクラスを追加 <div class="lesson lesson-hover"> : </div>
②hoverイベントを設定
// script.js
$('.lesson-hover').hover(
function(){
// マウスを乗せた時の処理
},
function(){
// マウスが外れた時の処理
}
);
hover機能の概要
hover時にtext-activeというclassを付けて、レッスンの説明文を表示させます。
/* stylesheet.css */
.text-contents {
:
display: none; /* デフォルトでは説明文を隠す */
}
.text-active {
display: block; /* text-activeクラスが付いている場合は説明文を表示 */
}
Classメソッド
addClassメソッド
addClassメソッドを用いると、指定した要素にクラスを追加することができます。下記では、text-contentsクラスのついた要素に、text-activeというクラスを追加しています。
<!-- index.html --> <p class="text-contents">...</p>
// script.js
$('.text-contents').addClass('text-active'); // text-activeクラスの前にドットは不要
removeClassメソッド
反対に、removeClassメソッドを用いると、指定した要素から指定したクラスを取り除くことができます。
<!-- index.html --> <p class="text-contents text-active">...</p>
// script.js
$('.text-contents').removeClass('text-active');
アコーディオン
最後は、FAQ（よくある質問）にアコーディオン機能を実装します。質問をクリックするとその答えがスライドして表示/非表示するようにします。
アコーディオン機能の概要
答えの部分はCSSで非表示にしておき、3つの質問部分には同一のclass名を付与し、それらのclickイベントを作ります。質問をクリックした時に、対応する答えを隠すのか表示するのかを判断するため、下記のようにopenというclassを用います。答えの表示中はopenをつけ、非表示中は外します。
<!-- index.html --> <div class="answer">...</div> <div class="answer open">...</div>
hasClassメソッド
hasClassメソッドは、引数に指定したクラスを、オブジェクトが持っているか判定する時に使用します。
<!-- index.html --> <div class="answer open">...</div>
// script.js
$('.answer open').hasClass('open');
// 結果: true
if文を用いた開閉操作
質問をクリックした時に、$(‘.answer’)がすでにopenクラスを持っていれば、（質問の答えが現在表示されていると判断できるので）openクラスを外し、答えを隠します。openクラスがない場合はその逆です。
// script.js
if ($('.answer').hasClass('open')){
// openクラスを外す処理
// 答えを隠す処理
} else {
// openクラスを付ける処理
// 答えを表示する処理
}