jQueryはJavaScriptのライブラリの1つです。
jQueryを使うことで、アニメーションをつけることやユーザーの行動に応じたインタラクティブなデザインを実現することができます。
Contents
jQueryの書き方
// script.js $('セレクタ').メソッド(引数); $('h1').hide(); // 要素を隠す $('h1').fadeOut(1500); // アニメーション速度を1500ミリ秒に指定 $('h1').fadeIn(slow); // アニメーション速度を「ゆっくり」に指定 $('h1').slideUp(); $('h1').slideDown();
隠れた要素を表示
/* stylesheet.css */ img { display: none; /* 初期状態では非表示 */ }
// script.js $('img').show(); // イベント発生時に表示
イベント
イベントとは
WEBページ内で、ユーザーによってクリックなどの操作が行われた時、予めイベント内に指定した処理を実行します。
// script.js $('セレクタ').イベント名(function() { // イベント発生時に実行したい処理 });
clickイベント
clickイベントを用いると、ボタンをクリックしたときに関連する文章を表示するといったイベントを設定できます。
<div id="hide-text">説明を隠す</div> <p id="text">ボタンをクリックすると文章が隠れます</p>
// script.js $('#hide-text').click(function() { $('#text').hide(); // クリックされた時に #text を隠す });
cssメソッド
cssメソッドは、CSSを変更できるメソッドです。
/* stylesheet.css */ p { color: blue; }
$('p').css('color','red'); // colorプロパティを赤に変更
cssメソッドで要素を隠す、表示する
<!-- index.html --> <h1>h1を隠す</h1> <img src="...">
/* stylesheet.css */ img { display: none; }
// h1 を隠す $('h1').css('display', 'none'); // img を表示 $('img').css('display','block');
HTMLを変更する
textメソッド
<!-- index.html --> <p>こんにちは</p>
// script.js $('p').text('こんばんは'); // p要素内の文字列を変更
htmlメソッド
<!-- index.html --> <p>こんにちは</p>
// script.js $('p').html('<span>こんばんは</span>'); // p要素内のHTMLを書き換える
thisの構文
<!-- index.html --> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
// script.js $('li').click(function() { $(this).css('color','red'); // $(this)はそのイベントが起こった要素を取得できます });
変数を使用する
変数を使用しない場合
// script.js $('div').css('color', 'red'); $('div').html('jQuery'); $('div').fadeOut();
変数を使用した場合
// script.js var $div = $('div'); // 同じjQueryオブジェクトを複数回使用する時は変数にする $div.css('color', 'red'); $div.html('jQuery'); $div.fadeOut();
メソッドチェーンを使用する
// script.js // ドット(.)で繋げて連続してメソッドを適用できる $('div').css('color', 'red').html('jQuery')
子要素を取得する
findメソッド
findメソッドは、全ての子孫要素(自分よりも下の階層の要素全て)の中から、指定したセレクタを持つ要素を取得したい時に用います。下の例では、<div id="wrapper">から</div>の中にあるすべての<a>要素を取得して、cssメソッドで色を変更しています。
<!-- index.html --> <div id="wrapper"> <a href="#">リンク1</a> <p> <a href="#">リンク2</a> </p> </div>
// script.js $('#wrapper').find('a').css('color', 'red');
childrenメソッド
childrenメソッドは、指定したセレクタが持つ子要素(一階層だけ下)の中から指定したセレクタに合致した要素を取得したいときに用います。下の例では、<div id="wrapper">の子要素は<a>タグと<p>タグが一つづつなので、「リンク1」のみcssメソッドで色が変更されます。
<!-- index.html --> <div id="wrapper"> <a href="#">リンク1</a> <p> <a href="#">リンク2</a> </p> </div>
// script.js $('#wrapper').children('a').css('color', 'red');
hoverイベントを作成
hoverイベントとは、要素にマウスが乗った時、外れた時に指定した処理を行うイベントです。
$('div').hover( function(){ // マウスを乗せた時の処理 }, function(){ // マウスを外した時の処理 } );
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)