jQuery 基礎チュートリアル

jQuery 効果

on()メソッドは選択された要素と子要素にイベントハンドラを追加します。

これもイベントが発生したときに実行される関数を追加します。

イベントハンドラを削除するには、off()メソッド。

一度だけ実行してその後自身を削除するイベントを追加するには、one()メソッド。

$(selector).on(event,　childSelector,　data,　function)

すべての<p>要素にクリックイベントを追加します：

例

$("p").on("click",　function(){
　　$(this).css("background-color",　"coral");
});

すべての<p>要素にmouseenterイベントを追加します：

例

$("p").on("mouseenter",　function(){
　　$(this).css("background-color",　"coral");
});

<div>要素に複数のイベントハンドラを追加します：

例

$("div").on("mouseenter　mouseleave　click",　function(){
　　$(this).text(Math.random());
});

データを関数に渡します：

例

$("document").ready(function(){
　　$("p").on("click",　{msg:　"你刚刚点了我!!!"},　showMsg)
});
function　showMsg(event)　{
　　$(this).append(event.data.msg);
});

使用childSelectorclickイベントをすべての<p>要素に追加するパラメータ：

例

$("document").ready(function(){
　　$("body").on("click", "p", changeSize);
});

<div>要素からmousemoveイベントを削除する：

例

$("button").click(function(){
　　$("div").off("mousemove");
});

パラメータ	説明
event	指定されたイベントやネームスペースをスペースで区切って指定
childSelector	（オプション）指定された子要素にのみ（選択子自体ではなく）イベントハンドラを追加する
data	（オプション）この関数に他のデータを渡すために指定する注意：を提供するときデータon()メソッドにパラメータを提供すると、イベントがトリガーされるたびに、そのパラメータがevent.data属性に処理プログラムに渡される
function	イベントがトリガーされたときに実行される機能