【jQuery入門 4】イベントって何？on、offを使ってみよう

どうも、忘れた頃にやって来るまりぞーです( ˘ω˘ )
jQuery入門編、第4回目はイベントについてです。
前回 : 【jQuery入門 3】要素を取得しよう。セレクタって何？機能的セレクタ編

今回も簡単なデモを用意しています。

目次

• イベントとは
• .on() : 実行する処理を設定
• .off() : 設定された処理を解除
• .ready()
• jQuery入門ガイド

イベントとは

例えば、イベントには下記のようなものがあります。

• .click()
  クリックされたとき
  
• .focus()
  フォーカスされたとき

• .resize()
  画面サイズが変更されたとき
  
• .scroll()
  スクロールされたとき
  
• .ready()
  読み込みが終わったとき
  

何かクリックしたときやウィンドウを読み込んだとき、何か変更したとき、スクロールしたとき、キー入力したときなどに実行する処理を設定できます。
設定できるイベントはたくさんありますが、今回は汎用性の高い.on()と.off()、そして.ready()をご紹介します。

• .on()
  実行する処理を設定
  
• .off()
  設定された処理を解除
  
• .ready()
  読み込まれたときの処理を設定
  

.on() : 実行する処理を設定

公式ドキュメント : .on() | jQuery API Documentation

DEMO 01 : click

class「demo01_trigger」を持つ要素「真田信繁」をクリックしたとき、アラート「メソポタミア文明」を出す

DEMO 01

HTML

<a href="#" class="btn_trigger demo01_trigger">真田信繁</a>

jQuery

$(function() {

    $('.demo01_trigger').on('click', function(){
		alert('メソポタミア文明');
	});

});

DEMO 02 : focus

1. class「demo02_trigger」を持つ要素「てーれってってー」にフォーカスしたとき、「てーれってってー」の枠を強調する
2. 「てーれってってー」の親要素の背景色を変更する

DEMO 02

HTML

<div>
    <input type="text" placeholder="てーれってってー" class="demo02_trigger">
</div>

jQuery

$(function() {

    $('.demo02_trigger').on('focus', function(){
		$(this).parent().css('background-color', '#dedede');
		$(this).css('border-color', '#f09');
	});

});

DEMO 03 : click + mouseover + mouseleave

1. class「demo03_trigger」を持つ要素「むちむちとしたおしりの誘惑」がクリックされたとき、class「demo03_target」を持つ要素「ペンギンのおしり」を表示する
2. 「むちむちとしたおしりの誘惑」にマウスオーバーしたときに、「むちむちとしたおしりの誘惑」の背景色を変更する
3. 「むちむちとしたおしりの誘惑」からマウスカーソルを外すと背景色をtransparentに変更する

DEMO 03

HTML

<a href="#" class="btn_trigger demo03_trigger">むちむちとしたおしりの誘惑</a>
<p class="demo03_target">ペンギンのおしり</p>

jQuery

$(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');
		}
	});

});

.off() : 設定された処理を解除

公式ドキュメント : .off() | jQuery API Documentation

DEMO 04 :

1. class「btn_trigger」を持つボタンをクリックしたとき、class「demo04_target」を持つ要素「アゴ」を表示/非表示する
2. 3つめのclass「demo04_trigger3」を持つボタン「off」がクリックされたときは、設定されたイベントを解除する

DEMO 04

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>

jQuery

$(function() {

    // on
	$('.demo04 .btn_trigger').on({
		click: function(){
			$('.demo04_target').fadeToggle();
		}
	});

	// off
	$('.demo04 .demo04_trigger3').off();

});

.ready()

公式ドキュメント : .ready() | jQuery API Documentation

DEMO 05 :

1. ページの読み込み後にclass「demo05_target」を持つ要素「ぴよぴよぴよぴよぴよ」をフェードインする
2. class「demo05_target2」を持つ要素「消えるのか・・・？」をフェードアウトする

DEMO 05

HTML

<p class="demo05_target"><strong>ぴよぴよぴよぴよぴよ</strong></p>
<p class="demo05_target2"><strong>消えるのか・・・？</strong></p>

jQuery

$(function() {

    $(document).ready(function() {
		$('.demo05_target').fadeIn(2000);
		$('.demo05_target2').fadeOut(2000);
	});

});

いかがでしょうか。
次回は要素の属性を操作します。
おたのしみにー。ぬふぬふ。

第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】プラグインを使ってみよう。