JQuery-Tipps im Zusammenhang mit (1)----Über $.Ready()

JQuery-Tipps im Zusammenhang mit (1)----Über $.Ready()_jquery

WBOY

Freigeben： 2016-05-16 16:39:37

Original

1603 Leute haben es durchsucht

Ich habe kürzlich JQuery studiert und diese Sache ist immer noch sehr umfassend und tiefgreifend. Lassen Sie mich meine Lernzusammenfassung teilen

$(document).Ready()-Methode VS OnLoad-Ereignis VS $(window).load()-Methode

Das erste, was Sie normalerweise lernen, wenn Sie mit JQuery in Kontakt kommen, ist, wann Sie mit der Veranstaltung beginnen sollen. Lange Zeit wurden Ereignisse, die nach dem Laden der Seite ausgelöst wurden, im Onload-Ereignis von „Body“ geladen.

Das Onload-Ereignis von Body hat im Vergleich zur Ready-Methode von JQuery viele Nachteile. Zum Beispiel:

1. Problem beim Laden mehrerer Funktionen

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

</body>

Nach dem Login kopieren

So können Sie nur im Onload-Ereignis laden, was hässlich ist ... In JQuery können Sie mehrere JQuery.Ready()-Methoden verwenden, und diese werden der Reihe nach ausgeführt

2. Code und Inhalt sind nicht getrennt

Es versteht sich von selbst, dass das so ekelhaft ist -.-!!

3. Die Reihenfolge der Ausführung ist unterschiedlich

Beim Body.Onload-Ereignis wird es erst ausgelöst, wenn der gesamte Seiteninhalt geladen ist, einschließlich Bilder, Flash usw. Wenn die Seite viel Inhalt hat, wird der Benutzer lange warten 🎜>
Was die Methode $(document).ready() betrifft, wird diese erst ausgelöst, nachdem das gesamte DOM der Seite geladen ist, was die Webseite zweifellos erheblich beschleunigen wird

Aber für einige spezielle Anwendungen, wie das Vergrößern und Verkleinern von Bildern und das Zuschneiden von Bildern. Muss es ausgeführt werden, nachdem der gesamte Inhalt der Webseite geladen wurde? Ich empfehle die Verwendung der Methode $(window).load(). Diese Methode wird erst ausgelöst, wenn der gesamte Inhalt der Seite geladen ist, und sie weist nicht die Nachteile des OnLoad-Ereignisses auf.

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

Nach dem Login kopieren

Der obige Code wird der Reihe nach ausgeführt, nachdem der gesamte Inhalt der Seite geladen wurde

Vergessen Sie natürlich nicht die entsprechende Unload-Methode

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

Nach dem Login kopieren

Der obige Code wird ausgelöst, wenn die Seite geschlossen wird

JS-Code auslösen, bevor das gesamte DOM geladen wird

Diese Methode ist meine Lieblingsmethode beim Debuggen und manchmal verwende ich diese Methode auch während der Entwicklung

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

Nach dem Login kopieren

Ja, es wird die Form des js-Abschlusses verwendet, um den js-Code in den Körper einzubetten. Natürlich können Sie den js-Code auch direkt einbetten Bestellausgabe wie folgt:

<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>

Nach dem Login kopieren

Die beiden oben genannten Codeteile, der zweite Codeteil, können nur das DOM vor dem aktuellen Code interpretieren, und der Test existiert nicht in der Anzahl der analysierten DOMs, sodass der zweite Codeteil nicht korrekt angezeigt werden kann.