ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery Tips関連(1)----$.Ready()_jqueryについて

JQuery Tips関連(1)----$.Ready()_jqueryについて

WBOYオリジナル: 2016-05-16 16:39:371613ブラウズ

私は最近 JQuery を勉強していますが、これはまだ非常に幅広く奥深いものです。

について学習の概要を共有しましょう。

$(document).Ready() メソッド VS OnLoad イベント VS $(window).load() メソッド

JQuery に触れるときに最初に学ぶのは、イベントをいつ開始するかということです。長い間、ページの読み込み後にトリガーされるイベントは、「Body」の Onload イベントに読み込まれていました。

Body の Onload イベントや JQuery の Ready メソッドと比較すると、次のような欠点があります。

1. 複数の関数のロードに関する問題

<body onload="a();b();">

</body>

Onload イベントではこのようにロードすることしかできませんが、これは見苦しいです... JQuery では、複数の JQuery.Ready() メソッドを使用でき、それらは順番に実行されます

2. コードとコンテンツは分離されていません

言うまでもなく、これはとても気持ち悪いです-.-!!

3. 実行順序が異なります

Body.Onload イベントの場合、すべてのページコンテンツ (写真、フラッシュなどを含む) が読み込まれるまでトリガーされません。ページに大量のコンテンツがある場合、ユーザーは長時間待機します。 🎜>
$(document).ready() メソッドに関しては、このメソッドはページのすべての DOM がロードされた後にのみトリガーされます。これにより、間違いなく Web ページが大幅に高速化されます。

ただし、写真のズームインやズームアウト、写真のトリミングなど、一部の特殊なアプリケーションでは使用できません。 Web ページのすべてのコンテンツが読み込まれた後に実行する必要がありますか? $(window).load() メソッドを使用することをお勧めします。このメソッドは、ページのすべてのコンテンツが読み込まれるまでトリガーされず、OnLoad イベントの欠点がありません。

  <script type="text/javascript">
    $(window).load(function() {
      alert("hello");
    });
    $(window).load(function() {
      alert("hello again");
    });
  </script>

上記のコードは、ページのすべてのコンテンツが読み込まれた後に順番に実行されます。

もちろん、対応する Unload メソッドも忘れないでください

$(window).unload(function() {
      alert("good bye");
    });

上記のコードは、ページが閉じられるとトリガーされます。

すべての DOM をロードする前に JS コードを起動します

この方法はデバッグ時に私のお気に入りであり、開発中にもこの方法を使用することがあります

<body>
  <script type="text/javascript">
    (function() {
      alert("hi");
    })(jQuery)
  </script>
</body>

はい、js クロージャの形式を使用して js コードを本体に埋め込みます。もちろん、この方法で js コードを直接埋め込むこともできます。次のように注文の問題に追加します:

<body>
<div id="test">this is the content</div>
  <script type="text/javascript">

    alert($("#test").html());//I Can display the content
    
  </script>
</body>
<body>

  <script type="text/javascript">

    alert($("#test").html());//I Can't display the content
    
  </script>
  <div id="test">this is the content</div>
</body>

上記 2 つのコード、2 番目のコードは現在のコードより前の DOM しか解釈できず、解析された DOM の数にテストが存在しないため、2 番目のコードは正しく表示できません。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Node.js_node.js のイベント駆動型プログラミングの詳細な説明次の記事：Node.js_node.js のイベント駆動型プログラミングの詳細な説明

続きを見る

JQuery Tips関連(1)----$.Ready()_jqueryについて

関連記事