jQuery は、HTML ページにおけるイベントに応答する仕立て屋さんです。

イベントとは?

Web ページが応答できる様々な訪問者の全アクションはが、イベントと呼ばれます。

イベントの説明では "fires/fired" という用語がしばしば使われますが、ここでは「発火」と訳すことにします。例:「キープレスイベントは、キーを押した瞬間に発火する」。

マウスイベント	キーボードイベント	フォームイベント	Document/Window イベント
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

イベント・メソッドの jQuery 構文

jQuery には、ほとんどの DOM イベントと同じ jQuery メソッドがあります。

ページ上の、全ての段落にクリックイベントを割り当てるには、次のようにします:

次のステップは、イベントが発火したときにどうするかを定義することです。イベントに関数を渡さなければなりません:

一般的に使用する jQuery イベント・メソッド

$(document).ready() メソッドは、文書が完全にロードされたとき、関数の実行を可能にします。このイベントは、jQuery 構文で説明済です。

click() メソッドは、HTML 要素にイベントハンドラ関数を接続します。

次の例は、<p> 要素にクリックイベントが発火したときに; 現在の

例

$("p").click(function(){
$(this).hide();
});

Try it Yourself »

dblclick() メソッドは、HTML 要素にイベントハンドラ関数を接続します。

関数は、HTML 要素をダブルクリックしたときに実行されます:

例

$("p").dblclick(function(){
$(this).hide();
});

Try it Yourself »

mouseenter() メソッドは、HTML 要素にイベントハンドラ関数を接続します。

関数は、マウスポインタが HTML 要素に入ったときに実行されます:

例

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

Try it Yourself »

mouseleave() メソッドは、HTML 要素にイベントハンドラ関数を接続します。

関数は、マウスポインタが HTML 要素から出たときに実行されます:

例

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

Try it Yourself »

mousedown() メソッドは、HTML 要素にイベントハンドラ関数を接続します。

関数は、マウスポインタが HTML 要素上にある間に、左、中央、右マウスボタンを押下したときに実行されます:

例

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

Try it Yourself »

mouseup() メソッドは、HTML 要素にイベントハンドラ関数を接続します。

関数は、マウスポインタが HTML 要素上にある間に、左、中央、右マウスボタンを放したときに実行されます:

例

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

Try it Yourself »

hover() メソッドは、mouseenter() と mouseleave() メソッドの 2 つの機能をもっています。

最初の機能は、HTML 要素にマウスが入った時に実行され、もう一つの機能は、 HTML 要素からマウスが出た時に実行されます:

例

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

Try it Yourself »

focus() メソッドは、HTML フォーム・フィールドにイベントハンドラ関数を接続します。

関数は、フォームフィールドがフォーカスを取得したときに実行されます:

例

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

Try it Yourself »

blur() メソッドは、HTML フォーム・フィールドにイベントハンドラ関数を接続します。

関数は、フォームフィールドがフォーカスを失ったときに実行されます:

例

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

Try it Yourself »

on() メソッド

on() メソッドは、選択した要素に 1 つ以上のイベント・ハンドラを接続します。

例

$("p").on("click", function(){
$(this).hide();
});

Try it Yourself »

例

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});

Try it Yourself »

jQuery イベント・メソッド

イベントとは?

イベント・メソッドの jQuery 構文

一般的に使用する jQuery イベント・メソッド

例

例

例

例

例

例

例

例

例

on() メソッド

例

例

練習問題で確認テスト！

jQuery イベント・メソッド