19b. ProgateでjQuery中級編 | ☂☂☂ボツワナに恵みの雨を☂☂☂

Contents

1 jQueryの準備
2 モーダル
3 hover機能
4 Classメソッド
- 4.1 addClassメソッド
- 4.2 removeClassメソッド
5 アコーディオン
- 5.1 WebProgramming入門

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クラスを付ける処理
	// 答えを表示する処理
}