今日の Web ブラウザーではイベントの処理が少し難しい部分であり、ブラウザーが異なればイベントの処理方法も異なります。したがって、これらのクロスブラウザーの問題を解決するには、jQuery のイベント処理 API を活用できます。
jQuery は、ブラウザーのさまざまなイベントや効果などを処理するための膨大な API を提供する小さな JavaScript ライブラリです。 JavaScript を使用したブラウザーのユーザー インターフェイス効果の処理について詳しくは、こちらをご覧ください。このチュートリアルでは、さまざまなブラウザ イベントを処理するための jQuery のさまざまな API を調べます。
ページ読み込みイベント
Ready (FN)、
これは、jQuery がサポートするすべての種類のイベントの基礎です。ページの読み込み時にフォームのフォーカスを設定したり、UI 効果を実行したりすることができます。
$(document).ready(function ( ) {
$("p").text("DOM がロードされ、操作できるようになりました。")
});
イベント処理 バインディング (タイプ、データ、FN)、
1 つ以上のイベント (クリック/ダブルクリックなど) を処理する任意の要素に要素をバインドすることができます。この機能は、任意の要素の顧客のイベント ハンドラーと組み合わせて使用します。
$("p").bind( "click" , function(e) {
var str = "( " e.pageX ", " e.pageY " )"
$("span").text("クリックが発生しました! " str); ;
});
$("p").bind("dblclick", function() {
$("span").text("this.tagName でダブルクリックが発生しました) ;
});
$("p").bind("mouseenter Mouseleave", function(e) {
$(this).toggleClass("over");
});
トリガー (イベント、データ) は、一致したすべての要素でイベントをトリガーします。
これにより、ブラウザーにも同じ名前が付けられます (存在する場合) ) 実行されるデフォルトのアクション。たとえば、trigger() を介した関数によって、ブラウザはフォームの「送信」も送信します。イベントにバインドされた関数の 1 つを返すことで、誤ったデフォルト動作を防ぐことができます。
トリガーされるイベントはブラウザーベースのイベントに限定されず、イベント トリガー バインディングの登録をカスタマイズすることもできます。
$("button:first")。 click(function () {
update($("span:first"));
});
$("button:last").click(function () {
$( "ボタン: 最初").trigger('click');
update($("span:last"))
関数 update(j) {
var n = parseInt(j .text(), 10);
j.text(n 1)
今日の Web 2.0アプリケーション プログラム、ユーザー誘致処理は非常に重要です。 jQuery は、これらの対話を処理するために使用できる API をいくつか提供します。ホバー (複数) この関数はホバー機能を提供します。つまり、マウス カーソルが一致する要素上を移動すると、最初に指定された関数が起動されます。マウスが要素上に移動すると、2 番目に指定された関数が起動します。また、マウスがまだ指定された要素 (div 内の画像など) 上にあるかどうかをどこで確認しますか。そうであれば、マウスは「ホバー」を続けて移動しません (mouseout イベント ハンドラーを使用する場合の一般的な動作) エラーが発生します。
コードをコピー
$(this).append($("
***"));
},
function () {
$( this).find("span:last").remove();
}
);
他のアクティビティの補助
以下に関数を示します。さまざまな種類のイベント リストを処理するために使用できます。
blur()
: 一致する要素ごとにブラー イベントをトリガーします。 コードをコピー
コードは次のとおりです。 $("input").blur( function () { $(this).next("span").css('display','inline').fadeOut(1000);
ブラー (FN); )
: ハンドラー関数を、一致する各要素のブラー イベントにバインドします。
[コード]
$("input").blur(function () { $(this).next("span").css('display','inline').fadeOut( 1000); });
(FN)
: 一致する各要素の変更イベントに関数をバインドします。
コードをコピー
コードをコピー
コードは次のとおりです。 $("p").mouseup( function() { $(this).append('
マウスアップ。');
}).mousedown(function( ){
$(this).append('マウスダウン。')
スクロール (FN)
: 一致する各要素のスクロール イベントにハンドラー関数をバインドします。
コードをコピー
$("span").css("display", "inline").fadeOut("slow");
}); 🎜>