jQueryファイルの
読み込み
jQueryは、.js形式のファイルにコードを書きます。 HTMLファイルで、<script src=”ファイルのURL”></script>と書くことで、jQueryのコードを記述するファイルが読み込まれます。 <script>はCSSファイルの読み込みのように<head>タグの中にも書けますが、</body>の直前に書くことで、WEBページの表示速度をより早めることが出来ます。
jQueryの型
functionready
jQueryはHTMLの中身を操作するため、HTMLの読み込みが完了してからjQueryによる操作を開始するようにします。 そのためにはreadyイベントを使用し、$(document).ready()の中身にjQueryの処理を書いていきます。 この構文には省略形も用意されており、$(function(){ });と書くことも出来ます。右の図の書き方を覚えておきましょう。
index.html
<!– scriptタグを用いて、jQueryを読み込んでください –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>
</footer>
<!– scriptタグを用いて、script.jsを読み込んでください –>
<script src=”script.js”></script>
script.js
// jQueryの型を用意してください
$(function() {
});
モーダルをつくろう
モーダル
図のように指定の場所をクリックするとモーダルが表示/非表示になるようにしましょう。モーダルとはclickイベントなどに基づいて、表示/非表示が行われる要素のことです。
index.html
<div class=”header-right”>
<!– 以下の<div>タグにlogin-showというidをつけてください –>
<div class=”login” id=”login-show”>ログイン</div>
</div>
</div>
</header>
<div class=”signup-modal-wrapper”>
</div>
<!– 「login-modal」というidを追加してください –>
<div class=”login-modal-wrapper” id=”login-modal”>
script.js
$(function() {
// 「#login-show」要素に対するclickイベントを作成してください
$(‘#login-show’).click(function() {
$(‘#login-modal’).fadeIn();
});
});
新規登録のモーダルを表示しよう
新規登録用のフォームもログインフォームと同様に、モーダルを用います。ログインフォームのモーダルとの違いは、新規登録のモーダルを表示するボタンが、ページの上部と下部の2箇所にあることです。2箇所に同じclickイベントを設定するので、新規登録のボタンにはidではなくclassを用いましょう。
index.html
signup-show”
id=”signup-modal”
モーダルを隠そう
hideclick
閉じるボタンをクリックした時に、モーダルが閉じるようにします。閉じるボタンにclickイベントを設定し、fadeOutメソッドでモーダルを隠すようにしましょう。
2つのモーダルを隠す
ログインと新規登録の2つのモーダルがありますが、これらを閉じるボタンは共通のものを使いましょう。
①2つのモーダルの閉じるボタンに共通のclass名を指定し、②クリックした時にログインと新規登録のモーダルをともに隠します。
index.html
<div class=”modal”>
<!– モーダルの閉じるボタンのHTMLを貼り付けてください –>
<!– “close-modal”というclassをつけてください –>
<div class=”close-modal”>
<i class=”fa fa-2x fa-times”></i>
</div>
script.js
// 「.close-modal」要素にclickイベントを設定してください
$(‘.close-modal’).click(function() {
$(‘#login-modal’).fadeOut();
$(‘#signup-modal’).fadeOut();
});
hover機能をつくろう
hover
hoverイベントを使って、下図のようにレッスンのアイコンにマウスが乗った時にだけ、レッスンの紹介文が表示されるようにしましょう。レッスンの紹介文はデフォルトでは表示しないようにします。
hoverイベントを準備しましょう。まずは、①hoverイベントを設定したい箇所に、「lesson-hover」というクラス名を追加します。次にscript.jsで②「.lesson-hover」に対してhoverイベントを設定します。
index.html
<!– lesson-hoverクラスを追加してください –>
<div class=”lesson lesson-hover”>
<div class=”lesson-icon”>
<img src=”https://prog-8.com/images/html/advanced/jQuery.png”>
script.js
// 「.lesson-hover」がhoverされたときのhoverイベントを作成してください
$(‘.lesson-hover’).hover(
function() {
},
function() {
}
);
hover機能の概要
hover
hover時にtext-activeというclassがあれば、レッスンの説明文を表示させるようにします。そのためにはまず①cssで.text-active{display: block}を指定します。そして②マウスが乗った時に説明文にtext-activeクラスをつけ、③マウスがはずれたときにtext-activeクラスを外す(説明文を非表示にする)ようにします。
addClassメソッド
addClass
addClassメソッドを用いると、指定した要素にクラスを追加することができます。下図の例では、text-contentsクラスのついた要素に、text-activeというクラスを追加しています。
removeClassメソッド
removeClass
反対に、removeClassメソッドを用いると、指定した要素から指定したクラスを取り除くことができます。下図の例では、text-contentsクラスのついた要素から、text-activeというクラスを取り除いています。
$(‘.lesson-hover’).hover(
function() {
// 子要素の「.text-contents」の要素を取得し、text-activeクラスをつけてください
$(this).find(‘.text-contents’).addClass(‘text-active’);
},
function() {
// 子要素の「.text-contents」の要素を取得し、text-activeクラスを外してください
$(this).find(‘.text-contents’).removeClass(‘text-active’);
}
);
アコーディオンをつくろう
最後は、FAQ（よくある質問）にアコーディオン機能を実装します。質問をクリックするとその答えがスライドして表示/非表示されます。ここではJavaScriptで学んだif文を用いるので、しっかり復習しておきましょう。
アコーディオン機能の概要
①答えの部分はCSSで非表示にします。②3つの質問部分には同一のclass名を付与し、③それらのclickイベントを作ります。質問をクリックした時に、対応する答えを隠すのか表示するのかを判断するため、下図のようにopenというclassを用います。答えの表示中はopenをつけ、非表示中は外します。
hasClassメソッド
hasClass
hasClassメソッドは、引数に指定したクラスを、オブジェクトが持っているか判定するときに使用します。オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返します。
// 「.faq-list-item」のclickイベントを作成してください
$(‘.faq-list-item’).click(function() {
var $answer = $(this).find(‘.answer’);
if ($answer.hasClass(‘open’)) {
$answer.removeClass(‘open’);
} else {
$answer.addClass(‘open’);
}
});
アコーディオンのスライド操作
if文slideUpslideDown
if文がtrueの時（下図で答えが表示されている時）、答えの部分はslideUpメソッドを用いて隠し、質問の右にある「-」記号は「+」記号に書き換えます。反対にif文がfalseの時は、答えをslideDownメソッドで表示し、「+」記号は「-」に書き換えましょう。
$(‘.faq-list-item’).click(function() {
var $answer = $(this).find(‘.answer’);
if($answer.hasClass(‘open’)) {
$answer.removeClass(‘open’);
// slideUpメソッドを用いて、$answerを隠してください
$answer.slideUp();
// 子要素のspanタグの中身をtextメソッドを用いて書き換えてください
$(this).find(‘span’).text(‘+’);
} else {
$answer.addClass(‘open’);
// slideDownメソッドを用いて、$answerを表示してください
$answer.slideDown();
// 子要素のspanタグの中身をtextメソッドを用いて書き換えてください
$(this).find(‘span’).text(‘-‘);
}
});