さまざまなブラウザ イベントを処理するためのさまざまな jQuery API_jquery

今日の 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 イベント ハンドラーを使用する場合の一般的な動作) エラーが発生します。


コードをコピー

コードは次のとおりです。 $("li").hover( function () {

$(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)
: 一致する各要素の変更イベントに関数をバインドします。

コードをコピー

コードは次のとおりです:

$("選択").change(function () {
var str = "";
$("選択オプション:選択済み").each(function () {
str = $(this).text() " ";
$("div").text(str)
.change();


クリック (FN)

: 一致する各要素のクリック イベントにバインドされた関数。

コードをコピー コードは次のとおりです。 $("p").click( function () {

$(this).slideUp();

});
$("p").hover(function () {
$(this).addClass("hilite ");
}, function () {
$(this).removeClass("hilite");
});



ダブルクリック (FN) )

: 一致する要素ごとに DblClick イベントをトリガーします。

コードをコピー コードは次のとおりです。 var divdbl = $("div:first ");

divdbl.dblclick(function () {

divdbl.toggleClass('dbl');
});



キー (FN)

: 一致する各要素のキー押下イベントに関数をバインドします。

コードをコピー コードは次のとおりです。 $("input").keypress( function (e ) {

if (e.that == 32 || (65 || (97 var c = String.fromCharCode(e.that);
$("p").append($(""))
.children(":last")
.append(document.createTextNode(c));
} else if (e.that == 8) {
// IE のバックスペースのみキーダウン時
$("p").children(":last").remove();
}
$("div").text(e.that); ;


マウスダウン (FN)
: 一致した各要素のマウスダウン イベントにバインドされた関数。

コードをコピー

コードは次のとおりです。 $("p").mouseup( function() { $(this).append('マウスアップ。');

}).mousedown(function( ){

$(this).append('マウスダウン。')



スクロール (FN)

: 一致する各要素のスクロール イベントにハンドラー関数をバインドします。

コードをコピー

コードは次のとおりです。 $("p").clone( ).appendTo (document.body); $("p").clone().appendTo(document.body); ; $(window).scroll(function () {

$("span").css("display", "inline").fadeOut("slow");

}); 🎜>