【プロゲート】jQuery 中級編の学習内容まとめ
jQuery 中級編
1.jQueryの準備
jQueryの準備
・このレッスンではHTML中級編で制作したランディングページに、jQueryで動きをつけていく
・jQueryを書いていく前に必要な準備について学びぶ
（jQuery初級編では事前に用意していた）
jQueryの読み込み
・jQueryを使用するには、jQueryライブラリを読み込む必要がある
・ライブラリはインターネット経由で読み込むのが一般的
・<head>タグの中で下図のようにURLを読み込むことで、jQueryが使用できるようになる
jQueryファイルの読み込み
・jQueryは、.js形式のファイルにコードを書く
・HTMLファイルで、<script src="ファイルのURL"></script>と書くことで、jQueryのコードを記述するファイルが読み込まれる
・<script>はCSSファイルの読み込みのように<head>タグの中にも書けるが、</body>の直前に書くことで、WEBページの表示速度をより早めることが出来る
readyイベント
・jQueryはHTMLの中身を操作するため、HTMLの読み込みが完了してからjQueryによる操作を開始するようにする
・そのためにはreadyイベントを使用し、$(document).ready()の中身にjQueryの処理を書いていく
・この構文には省略形も用意されており$(function(){ });と書くことも出来る
2.モーダルを表示しよう(1)
モーダルをつくろう
・指定の場所をクリックするとモーダルが表示/非表示になるようにする
・モーダルとはclickイベントなどに基づいて、表示/非表示が行われる要素
モーダルの表示
・ヘッダーにあるログインボタンを使って、ログインフォームをモーダルにする
・モーダルにするには、3つのステップが必要
3.モーダルを表示しよう(2)
新規登録のモーダルを表示しよう
・新規登録用のフォームもログインフォームと同様に、モーダルを用いる
・ログインフォームのモーダルとの違いは、新規登録のモーダルを表示するボタンが、ページの上部と下部の2箇所にあること
・2箇所に同じclickイベントを設定するので、新規登録のボタンにはidではなくclassを用いる
新規登録モーダルの表示
・新規登録用のフォームを表示するには２つのステップが必要
4.モーダルを隠そう
モーダルを隠そう
・閉じるボタンをクリックした時に、モーダルが閉じるようにする
・閉じるボタンにclickイベントを設定し、fadeOutメソッドでモーダルを隠すようにする
2つのモーダルを隠す
・ログインと新規登録の2つのモーダルがあるが、これらを閉じるボタンは共通のものを使う
①2つのモーダルの閉じるボタンに共通のclass名を指定し、
②クリックした時にログインと新規登録のモーダルをともに隠す
5.hover機能の準備
hover機能をつくろう
・hoverイベントを使って、レッスンのアイコンにマウスが乗った時にだけ、レッスンの紹介文が表示されるようにする
・レッスンの紹介文はデフォルトでは表示しないようにする
hoverイベントの準備
・まずは、①hoverイベントを設定したい箇所に、「lesson-hover」というクラス名を追加する
・次にscript.jsで②「.lesson-hover」に対してhoverイベントを設定する
6.addClass・removeClass
hover機能の概要
・hover時にtext-activeというclassがあれば、レッスンの説明文を表示させる
①cssで.text-active{display: block}を指定する
②マウスが乗った時に説明文にtext-activeクラスをつけ、
③マウスがはずれたときにtext-activeクラスを外す(説明文を非表示にする)
addClassメソッド
・addClassメソッドを用いると、指定した要素にクラスを追加することができる
・text-contentsクラスのついた要素に、text-activeというクラスを追加している
removeClassメソッド
・反対に、removeClassメソッドを用いると、指定した要素から指定したクラスを取り除くことができる
・text-contentsクラスのついた要素から、text-activeというクラスを取り除いている
7.アコーディオンの準備(1)
アコーディオンをつくろう
・最後は、FAQ（よくある質問）にアコーディオン機能を実装する
・質問をクリックするとその答えがスライドして表示/非表示される
・ここではJavaScriptで学んだif文を用いるので、しっかり復習しておく
アコーディオン機能の概要
①答えの部分はCSSで非表示にする
②3つの質問部分には同一のclass名を付与し、
③それらのclickイベントを作る
・質問をクリックした時に、対応する答えを隠すのか表示するのかを判断するため、openというclassを用いる
・答えの表示中はopenをつけ、非表示中は外す
8.アコーディオンの準備(2)
hasClassメソッド
・hasClassメソッドは、引数に指定したクラスを、オブジェクトが持っているか判定するときに使用する
・オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返す
if文を用いた開閉操作
・答えの表示・非表示は以下のようにif文を用いて行う
・質問をクリックした時に、$('.answer')がすでにopenクラスを持っていれば、（質問の答えが現在表示されていると判断できるので）openクラスを外し、答えを隠す
・openクラスがない場合はその逆
9.アコーディオンを完成しよう
アコーディオンのスライド操作
・if文がtrueの時（答えが表示されている時）、答えの部分はslideUpメソッドを用いて隠し、質問の右にある「-」記号は「+」記号に書き換えます。反対にif文がfalseの時は、答えをslideDownメソッドで表示し、「+」記号は「-」に書き換える
この記事が気に入ったらサポートをしてみませんか？