SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

どうも、忘れた頃にやって来るまりぞーです( ˘ω˘ )
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」を持つ要素「真田信繁」をクリックしたとき、アラート「メソポタミア文明」を出す

DEMO 01

jQueryイベント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

jQueryイベント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

jQueryイベント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

jQueryイベント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

jQueryイベント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】要素の属性の取得と書き換え

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

まりぞー(マークアップエンジニア)

ゆるキャラとFPSゲームとおいしい食べものが好きですヽ(゜ω゜)ノ

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation