Contents
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クラスを付ける処理 // 答えを表示する処理 }
WebProgramming入門
- 01a. 開発環境構築(Windows8.1+VMware Player+CentOS)
- 01b. 開発環境構築(Windows 10+Ubuntu)
- 01c. 開発環境構築(Ubuntu18.04(WSL)+Ansible+Serverspec+WP-CLI)
- 01d. 開発環境構築(WSL2+Ubuntu18.04+Docker)(作成中)
- 02a. AWS環境構築(CentOS6)
- 02b. AWS環境構築(CentOS6+LAMP環境+WordPress)
- 02c. AWS環境構築(CentOS7+Django)
- 02d. AWS環境構築(CentOS7+Ansible+Serverspec+WP-CLI+Munin)(作成中)
- 02z. さくらのクラウド環境構築(CentOS7+Ansible+Serverspec+WP-CLI)
- 03a. WordPress制作入門
- 03b. WordPress制作入門
- 04. トラブルシューティング
- 11. HTML/CSS入門
- 11a. ProgateでHTML&CSS初級
- 11b. ProgateでHTML&CSS中級(ランディングページ)
- 11c. ProgateでHTML&CSS上級(レスポンシブデザイン)
- 11d. ProgateでHTML&CSS(Flexbox編)
- 11e. ProgateでSass(CSSをより便利に効果的に操作する言語)
- 11y. ドットインストールでBootstrap4入門
- 11z. PaizaラーニングでBootstrap4入門
- 12. MySQL入門
- 12a. ProgateでSQL Ⅰ~Ⅲ
- 12b. ドットインストールでmongoDB入門
- 13. PHP入門
- 14. ProgateでRubyⅠ~Ⅴ
- 15a. ProgateでRuby on RailsⅠ~Ⅴ
- 15b. ProgateでRuby on RailsⅥ~Ⅷ
- 15c. ProgateでRuby on RailsⅨ~Ⅺ
- 16. ProgateでPythonⅠ~Ⅴ
- 17. paizaラーニングでFlask入門
- 18a. Django入門1(Djangoの基本の理解)
- 18b. Django入門2(Djangoの動作の理解)
- 18c. Django入門3(Djangoのテンプレートとフォームを理解)
- 18d. Django入門4(お勧め店を投稿できるランチマップアプリの作成)
- 18e. Django入門5(Djangoでユーザー管理)
- 19a. ProgateでjQuery初級編
- 19b. ProgateでjQuery中級編
- 19c. ProgateでjQuery上級編
- 20a. ProgateでJavascript(ES6)Ⅰ~Ⅲ
- 20b. ProgateでJavaScript Ⅳ~Ⅴ
- 20c. ProgateでJavaScript Ⅵ~Ⅶ
- 20d. JavaScriptでCRUDアプリを作る(ELOOP)