ページを開いたときにjqueryを実行する方法

Web 開発に jQuery を使用する場合、ページの読み込み後に、初期表示効果の設定、特別なプロンプト情報の表示など、特定の操作を自動的に実行する必要がある場合があります。では、この機能を実装するにはどうすればよいでしょうか?この記事では、ページを開いたときにjQueryを実行させる方法を紹介します。

1. jQuery の $(document).ready() 関数を使用する

jQuery の $(document).ready() 関数を使用するのが最も一般的に使用される方法であり、この関数は DOM の後にいつがロードされると、コールバック関数内のコードが実行されます。コード例は次のとおりです。

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

上記のコードに示されているように、$(document).ready() 関数で渡されるパラメータは関数であり、DOM がロードされた後に実行されます。この関数内で、実行する必要がある jQuery コードを作成できます。

2. jQuery の window.onload() 関数を使用する

jQuery の window.onload() 関数は、ページ上のすべてのリソース (画像、スタイル シートなどを含む) が完了するまで実行されません。ロードされています。 $(document).ready() 関数と比較して、window.onload() 関数にはより広範なコンテンツが含まれるため、実行時間は比較的長くなります。コード例は次のとおりです。

$(window).on('load', function() {
  //执行的代码
});

$(document).ready() 関数とは異なり、window.onload() 関数のコードは、すべてのリソースがロードされるまで実行されません。したがって、実行する前にリソースがロードされるまで待機する必要があるコードをここに記述することもできます。

3. 即時関数呼び出しを使用する

上記の 2 つの方法に加えて、即時関数呼び出しメソッドを使用して、ページが読み込まれた後にコードを自動的に実行することもできます。関数をすぐに呼び出すということは、関数の本体をかっこでカプセル化し、最後に別のかっこを追加して関数を実行することを意味します。コード例は次のとおりです。

(function() {
  //执行的代码
})();

上記のコードに示すように、このコードの $(function(){}) は $(document).ready(function(){}) と同等です。コードの内容が小さい場合は、それを匿名関数にカプセル化して実行する方法を使用できます。

4. defer 属性を使用する

外部 JavaScript リソースをページに導入する場合、defer 属性を使用してブラウザーにページのレンダリングを続行し、JavaScript が読み込まれるまで待機するように指示できます。実行する前に。たとえば、次のコード:

<script src="xxxx.js" defer></script>

上記のコードでは、外部リソース xxxx.js の読み込み、解析、および実行プロセスは、ページのレンダリングには影響しません。 JavaScript がロードされると、スクリプトのコードの実行が完了するまで、解析キューが実行されるのを待ちます。

5. async 属性を使用する

defer 属性とは異なり、async 属性はスクリプトをダウンロードしてすぐに実行する必要があることを示しますが、スクリプトの実行中は、スクリプトの解析は停止しません。他のスクリプトのロードと実行。ネットワーク速度が遅く、スクリプトのダウンロードと解析に時間がかかる場合、ページの一部の要素が読み込まれる前にスクリプトの実行が開始される可能性があります。使用方法は次のとおりです。

<script src="xxxx.js" async></script>

ページを開いたときに jQuery を実行する方法は上記 5 つで、その中で最も使用されるのは $(document).ready() 関数と即時呼び出し関数です。一般的に使用される方法。実際の使用では、ニーズに応じてさまざまな方法を選択できます。

以上がページを開いたときにjqueryを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。