JQuery Tips関連(1)----$.Ready()_jqueryについて-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:39:37

オリジナル

1605 人が閲覧しました

私は最近 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 番目のコードは正しく表示できません。