Heim > Artikel > Web-Frontend > JQuery-Tipps im Zusammenhang mit (1)----Über $.Ready()_jquery

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

WBOYOriginal: 2016-05-16 16:39:371539Durchsuche

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>

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>

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");
    });

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>

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>

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der ereignisgesteuerten Programmierung in Node.js_node.jsNächster Artikel：Ausführliche Erläuterung der ereignisgesteuerten Programmierung in Node.js_node.js

In Verbindung stehende Artikel

Mehr sehen