jQuery.ready()関数インスタンスの使用方法の詳細な説明

ready() 関数は、現在のドキュメント構造がロードされた直後に指定された関数を実行するために使用されます。

この関数は window.onload イベントと同等です。

この関数を複数回呼び出して複数の関数をバインドすることができます。jQuery は、DOM ドキュメント構造が読み込まれた直後に、バインド順序でこれらの関数を実行します。

注意: ready() 関数と 要素の onload イベント バインディング関数は、相互に完全な互換性がないため、同じページで同時に使用しないでください。ロードを使用する必要がある場合は、jQuery のready() およびload() を使用してウィンドウまたは指定された項目 (画像など) にロード イベント ハンドラーを追加しないでください。 この関数はjQueryオブジェクト(インスタンス)に属します。

構文

jQueryObject.ready( fn )

パラメータ

パラメータの説明

fn 関数タイプは、実行する必要がある関数を指定します。

ready() はパラメータを

functionparameter

fn に渡します。このパラメータは、パラメータの名前をカスタマイズして、jQuery のエイリアスとして使用できます。 戻り値

ready()

関数

の戻り値はjQuery型で、現在のjQueryオブジェクトそのものを返します。 window.onload イベントと比較して、ready() は実行

優先度

が高くなります。 window.onload は、画像を含む現在のページ内のすべての要素がロードされるまで待機してから実行する必要があります。ready() は、画像などのすべてのリソースがロードされるのを待たずに、HTML 構造が描画された直後に実行されます。 ほとんどの場合、window.onload の代わりに ready() を使用できます。ただし、:target セレクターを使用する場合、window.onload イベントを使用する必要があるなど、いくつかの例外があります (ドキュメント構造の外部にも依存するため)。

例と説明

ready() 関数には、次の 3 つの同等の形式があります:

function handler(){

//実行する必要があるコードは次のとおりです

}

// 形式 1

$ (

document

).ready( handler );// フォーム 2

$( ).ready( handler ); // このフォームは推奨されません

// フォーム 3

$( handler );

次の HTML コードを例として挙げます。

以下の jQuery サンプル コードは、ready() 関数の具体的な使用法を示すために使用されます。

// フォーム 1

$(document).ready( function(){

// クリック イベントをボタンにバインドします。ボタン

$("# btn ").CLICK (Function () {

アラート (" ボタンをクリックしました! ");

}); ("#message"); ドキュメントがロードされました!' );

} );

複数の JS ライブラリが共存する場合、変数 $ の制御が他のライブラリに渡される可能性があります。プロトタイプなどの JS ライブラリ。この時点では、変数 jQuery はグローバル スコープでのみ使用できます。ただし、ready() 関数はパラメータを渡すので、パラメータ名をカスタマイズして、関数内で変数 $ を継続して jQuery ライブラリにアクセスできます (別の名前に設定することもできます)。パラメーター変数を使用して jQuery にアクセスします)。

// プロトタイプ ライブラリ ファイルをロードします

// jQuery ライブラリ ファイルをロードします

// 変数の制御を放棄します $

jQuery.noConflict();

// プロトタイプに基づいて

DOM 操作を実行します

(変数 $ の制御は Prototype)

$("myDiv").setStyle( {color: "#ffffff"} );

jQuery(document).ready( function( $ ){

/ / 関数内 内部的には、変数 $

$("#message").html( "現在の jQuery バージョンは: " + $.fn.jquery ); を使用して jQuery にアクセスできます。 jQuery(document).ready( function( abc ){

// 関数内で、変数 abc を使用して jQuery

abc("#message").html( "現在の jQuery バージョンは次のとおりです: " + abc.fn.jquery );

} );

以上がjQuery.ready()関数インスタンスの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。