どうも、忘れた頃にやって来るまりぞーです( ˘ω˘ ) jQuery入門編、第4回目はイベントについてです。 前回 : 【jQuery入門 3】要素を取得しよう。セレクタって何？機能的セレクタ編
目次
目次
イベントとは
例えば、イベントには下記のようなものがあります。
- .click() クリックされたとき
- .focus() フォーカスされたとき
- .resize() 画面サイズが変更されたとき
- .scroll() スクロールされたとき
- .ready() 読み込みが終わったとき
何かクリックしたときやウィンドウを読み込んだとき、何か変更したとき、スクロールしたとき、キー入力したときなどに実行する処理を設定できます。
設定できるイベントはたくさんありますが、今回は汎用性の高い.on()と.off()、そして.ready()をご紹介します。
- .on() 実行する処理を設定
- .off() 設定された処理を解除
- .ready() 読み込まれたときの処理を設定
.on() : 実行する処理を設定
公式ドキュメント : .on() | jQuery API Documentation
DEMO 01 : click
class「demo01_trigger」を持つ要素「真田信繁」をクリックしたとき、アラート「メソポタミア文明」を出す
HTML
|
1 2 3 |
[sourcecode lang="html"] <a href="#" class="btn_trigger demo01_trigger">真田信繁</a> [/sourcecode] |
jQuery
|
1 2 3 4 5 6 7 8 9 |
[sourcecode lang="javascript"] $(function() { $('.demo01_trigger').on('click', function(){ alert('メソポタミア文明'); }); }); [/sourcecode] |
DEMO 02 : focus
- class「demo02_trigger」を持つ要素「てーれってってー」にフォーカスしたとき、「てーれってってー」の枠を強調する
- 「てーれってってー」の親要素の背景色を変更する
HTML
|
1 2 3 4 5 |
[sourcecode lang="html"] <div> <input type="text" placeholder="てーれってってー" class="demo02_trigger"> </div> [/sourcecode] |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
[sourcecode lang="javascript"] $(function() { $('.demo02_trigger').on('focus', function(){ $(this).parent().css('background-color', '#dedede'); $(this).css('border-color', '#f09'); }); }); [/sourcecode] |
DEMO 03 : click + mouseover + mouseleave
- class「demo03_trigger」を持つ要素「むちむちとしたおしりの誘惑」がクリックされたとき、class「demo03_target」を持つ要素「ペンギンのおしり」を表示する
- 「むちむちとしたおしりの誘惑」にマウスオーバーしたときに、「むちむちとしたおしりの誘惑」の背景色を変更する
- 「むちむちとしたおしりの誘惑」からマウスカーソルを外すと背景色をtransparentに変更する
HTML
|
1 2 3 4 |
[sourcecode lang="html"] <a href="#" class="btn_trigger demo03_trigger">むちむちとしたおしりの誘惑</a> <p class="demo03_target">ペンギンのおしり</p> [/sourcecode] |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
[sourcecode lang="javascript"] $(function() { $('.demo03_target').hide(); $('.demo03_trigger').on({ click: function(event){ event.preventDefault(); $(this).next().slideToggle(400); }, mouseover: function(){ $(this).css('background-color', '#fda'); }, mouseleave: function(){ $(this).css('background-color', 'transparent'); } }); }); [/sourcecode] |
.off() : 設定された処理を解除
公式ドキュメント : .off() | jQuery API Documentation
DEMO 04 :
- class「btn_trigger」を持つボタンをクリックしたとき、class「demo04_target」を持つ要素「アゴ」を表示/非表示する
- 3つめのclass「demo04_trigger3」を持つボタン「off」がクリックされたときは、設定されたイベントを解除する
HTML
|
1 2 3 4 5 6 |
[sourcecode lang="html"] <button class="btn_trigger demo04_trigger">on</button> <button class="btn_trigger demo04_trigger2">on</button> <button class="btn_trigger demo04_trigger3">off</button> <p class="demo04_target">アゴ</p> [/sourcecode] |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[sourcecode lang="javascript"] $(function() { // on $('.demo04 .btn_trigger').on({ click: function(){ $('.demo04_target').fadeToggle(); } }); // off $('.demo04 .demo04_trigger3').off(); }); [/sourcecode] |
.ready()
公式ドキュメント : .ready() | jQuery API Documentation
DEMO 05 :
- ページの読み込み後にclass「demo05_target」を持つ要素「ぴよぴよぴよぴよぴよ」をフェードインする
- class「demo05_target2」を持つ要素「消えるのか・・・？」をフェードアウトする
HTML
|
1 2 3 4 |
[sourcecode lang="html"] <p class="demo05_target"><strong>ぴよぴよぴよぴよぴよ</strong></p> <p class="demo05_target2"><strong>消えるのか・・・？</strong></p> [/sourcecode] |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
[sourcecode lang="javascript"] $(function() { $(document).ready(function() { $('.demo05_target').fadeIn(2000); $('.demo05_target2').fadeOut(2000); }); }); [/sourcecode] |
いかがでしょうか。 次回は要素の属性を操作します。 おたのしみにー。ぬふぬふ。 第5回目はこちら。 【jQuery入門 5】要素の属性の取得と書き換え
jQuery入門ガイド
- 【初心者】さくっと見れるjQueryの使い方
- 【jQuery入門 1】超基本！ jQuery のダウンロードと書き方
- 【jQuery入門 2】セレクタって何？要素を取得しよう。基本編
- 【jQuery入門 3】要素を取得しよう。セレクタって何？機能的セレクタ編
- 【jQuery入門 4】イベントって何？on、offを使ってみよう
- 【jQuery入門 5】要素の属性の取得と書き換え
- 【jQuery入門 6】要素の書き換え、追加・削除
- 【jQuery入門 7】CSSの取得・追加・変更をしよう
- 【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。
- 【jQuery入門 9】Animateなどを使って様々なアニメーションをつけよう
- 【jQuery入門 10】プラグインを使ってみよう。
