JQuery でのイベントと DOM アニメーション操作の概要

JQuery のイベント

1. DOM をロードする

ページがロードされた後、ブラウザは JavaScript を介して DOM 要素にイベントを追加します。通常の JavaScript コードでは通常 window.onload メソッドが使用され、JQuery では $(document).ready() メソッドが使用されます。 JQueryの簡易記述メソッド「$()」。 window.onloadにイベントを登録する場合、1つのwindow.onloadボディにのみ登録できます。しかし、JQueryを使えば、複数の$(document).ready()や$()を登録することができます。

2. イベントバインディング

指定されたイベントを一致する要素にバインドします。たとえば、昨日、window.onload でイベントをバインドしました: "$("p").onclick(function(){

alert( $(this).text() );

});" JQuery の $(document).ready() は次のようにバインドできます:
“$("p").click(function(){

alert( $(this).text() );

}) ;”

binding() を使用すると、次のようにバインドできます:
$("p").bind("click", function(){

alert( $(this).text() );

} );

3. 合成イベント

hover(): カーソルのホバー時間をシミュレートします。カーソルが要素上に移動すると、指定された最初の関数がトリガーされ、カーソルが要素の外に移動すると、指定された 2 番目の関数がトリガーされます。たとえば、ホバー効果:

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

toggle(): 連続マウスクリックイベントをシミュレートするために使用されます。初めて要素をクリックすると、最初に指定された関数がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数がトリガーされます。さらに関数がある場合は、最後の関数まで順番にトリガーされます。たとえば、要素の選択効果と選択されていない効果を設定します:

$("td").toggle(

function () {$(this).addClass("selected");},
function () {$( this) .removeClass("selected");}
);

パラメータを渡さずに toggle() を使用すると、要素の表示状態が切り替わります。

4. イベントのバブル

イベントは DOM 階層に従って水ぶくれのように上昇し続け、最上位に到達するだけです。

解決策:

イベント処理関数で false を返すと、イベントのバブリングが停止します。要素のデフォルトの動作を停止することもできます。

現在のすべての UI インタラクションまたはそのイベントは、この機能をサポートしています。独自のイベント処理関数で false を返すと、イベントの受け渡しが中止されます。真のイベントを返し、下方に渡し続けます。

5. イベント オブジェクトのプロパティ

イベント オブジェクト: イベントがトリガーされると、イベント オブジェクトが作成されます。プログラム内でイベントを使用するには、ハンドラー関数にパラメーターを追加するだけで済みます。イベント ハンドラー関数でいくつかのパラメーターを使用します。たとえば、イベント発生時のページに対する相対位置を取得するには、event.pageX、event.pageY、event をイベント処理関数のパラメーターにします。

6.

イベントの削除

off May btn”).unbind();

one(): このメソッドは、処理関数を要素にバインドできます。ハンドラー関数が一度トリガーされると、イベントはすぐに削除されます。つまり、各オブジェクトで、イベント ハンドラー関数は 1 回だけ実行されます。

JQueryでのDOMアニメーション

DOMオブジェクトの表示・非表示メソッドを設定することで、アニメーション効果を演出することができます。

1. アニメーション効果を使用せずに表示と非表示を切り替える

hide(): HTML ドキュメントで要素の Hide() メソッドを呼び出すと、要素の表示スタイルが none に変更されます。コード関数は css("display", "none"); と同じです。

show(): 要素の表示スタイルを前の表示状態に変更します。

toggle(): 要素の表示状態を切り替えます。要素が表示されている場合は非表示に切り替え、要素が非表示になっている場合は表示に切り替えます。

2. 透明効果の非表示と表示を設定することで、フェードインおよびフェードアウトのアニメーション効果を実現できます

fadeIn()、fadeOut(): 要素の透明度のみを変更します。 fadeOut() は、要素が完全に消えるまで、指定された期間要素の不透明度を下げます。 fadeIn() はその逆を行います。たとえば、段落を 600 ミリ秒かけてゆっくりフェードインします: $("p").fadeIn("slow");。

fadeTo(): 不透明度を指定した値 (0 ～ 1 の間) に段階的に調整します。オプションで、アニメーションが完了したときに コールバック関数 をトリガーします。たとえば、段落の透明度を 0.25 にすばやく調整するには、200 ミリ秒を使用します。アニメーションが終了すると、「アニメーション完了」メッセージ ボックスが表示されます。 "$("p").fadeTo("fast", 0.25, function( ){ アラート(" アニメーションが完了しました。") });"。

3. 高さ効果の非表示と表示を設定することで、下にスライドして閉じるアニメーション効果を実現できます

slideDown()、slideUp(): 要素の高さのみが変更されます。要素の表示属性が none の場合、slideDown() メソッドを呼び出すと、要素は上から下に向かって表示されます。 slideUp() メソッドはその逆で、要素は下から上に短縮されて非表示になります。たとえば、段落をゆっくり下にスライドするには、600 ミリ秒を使用します: $("p").slideDown("slow");。

slideToggle(): 高さを変更することで、一致する要素の表示を切り替えます。たとえば、200 ミリ秒以内に段落を素早く上下にスライドすると、「アニメーションが完了しました」というメッセージ ボックスが表示されます。 "アニメーションが完了しました" ."); });"。

以上がJQuery でのイベントと DOM アニメーション操作の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。