JS および jQuery ドキュメントが読み込まれるときにコードを記述するにはどうすればよいですか?

HTML には実行順序があり、デフォルトはトップダウン実行です。そのため、js コードが html コードの下にある場合は正常に実行できますが、js コードが html コードより上にある場合は、ドキュメントが読み込まれるまで正常に実行できません。

1. jQuery フレームワークを導入せず、ネイティブ JS コードのみを記述する場合は、ウィンドウ オブジェクト

window.onload = function(){
  //要执行的js代码段  
}

(注: 使用する場合、window.onload を直接 onload に省略できますが、曖昧さと不要なエラーを避けるために、window)

と記述するのが最善です。 2. jQuery を導入する場合、さまざまな方法があります。ここでは最も複雑な記述方法の 1 つだけを示します (他の記述方法は基本的にこのタイプのバリエーションです)、および 2 つの最も一般的な記述方法

(function($,window,document,undefined){
    //要执行的js代码段
})(jQuery,window,document);

です。

(1) 先頭にセミコロンを使用する目的は、複数のファイルを圧縮してマージするときに、他のファイルのステートメントの最後の行にセミコロンがないことによる、マージ後の構文エラーを防ぐことです。ファイルの圧縮とマージの場合、このセミコロンを記述する必要はありません)

(2) これは、一般に、無名関数の自己実行です。この自己実行匿名関数を使用して内部変数を保護します

(3)。ここで、$ は、回避するために jQuery オブジェクトを受け取ります。 $ 変数の競合を回避し、複数のプラグインが正常に実行できるようにする (jQuery プラグインのみを導入する場合は、これを記述する必要はありません)

(4) 実際のパラメータは 2 つのオブジェクト ウィンドウを受け取りますwindow と document の 2 つのオブジェクトは、それぞれグローバル環境にあります。関数本体内の window と document は、グローバル ウィンドウやドキュメント オブジェクトではなく、実際にはローカル変数です。これを行う利点は、パフォーマンスが向上し、スコープのクエリ時間が短縮されることです (関数本体でウィンドウまたはドキュメント オブジェクトを複数回呼び出す必要がある場合は、ウィンドウまたはドキュメント オブジェクトをパラメーターとして渡すことが非常に必要です。これら 2 つのオブジェクトはコード内で使用されていないため、これら 2 つのパラメータを渡す必要はありません)

(5) unknown を使用する理由:

① unknown は window のプロパティであるため、ローカル変数として宣言した後、関数内に未定義と比較される別の変数がある場合、プログラムはウィンドウ内で未定義を検索する必要がなくなり、プログラムのパフォーマンスが向上します。一部の古いブラウザでは使用されませんが、直接使用するとエラーが報告されるため、形式的なパラメータを追加する必要があります。未定義

2。 :

$(document).ready(function(){
    //要执行的js代码段
});

(注: ① js フレームワークとして jQuery のみを導入するかどうかを決定する場合、コード内の $ を複雑な記述のようにパラメータの形式で渡すことができます。 ② コード内のドキュメントは省略できます。 )

3. 最も簡単な書き方:

$(function(){
    //要执行的js代码段
});

(注: 詳細は上記の方法と同じです)

3. まとめ: いろいろな書き方がありますロード後のドキュメントは、実際の状況や個人の習慣に従って使用する必要があります。

以上がJS および jQuery ドキュメントが読み込まれるときにコードを記述するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。