Ausführliche Erläuterung der Unterschiede zwischen Dokument und Fenster sowie Laden und Bereitstellen in jQuery_jquery

Kinder, die JavaScript verwendet haben, sollten das Fensterobjekt und das Dokumentobjekt kennen und auch von dem Ladeereignis und dem Bereitschaftsereignis gehört haben. Natürlich weiß Xiaocai es auch und glaubt, es sehr gut zu verstehen Kürzlich ging es schief, dass ihm klar wurde, dass es nicht so einfach war.

Lassen Sie uns zunächst über Fenster und Dokument sprechen. Intuitiv ausgedrückt stellt Fenster das Browserfenster dar und Dokument stellt das im Browserfenster geladene Dom-Element dar. Darüber hinaus ist Dokument ein Attribut von Fenster und Fenster ist das Objekt der obersten Ebene.

Was ist der Unterschied zwischen den beiden? Es ist leicht zu verstehen. Angenommen, die darin geladene Seite ist sehr lang und überschreitet einen Bildschirm. Natürlich werden zu diesem Zeitpunkt auf jeden Fall Bildlaufleisten angezeigt. (Dokument). height() ist nicht gleich, die Höhe des Dokuments muss größer sein als die des Fensters, da das Fenster immer so groß ist. Siehe das Bild unten:

Lassen Sie uns über das Load-Ereignis und das Ready-Ereignis sprechen (Load und Ready beziehen sich hier auf jQuery-Ereignisse, dasselbe unten).

Lassen Sie uns zuerst über das Laden sprechen. Es wird hauptsächlich verwendet, um das native window.onload zu ersetzen. Es kann nur in zwei Szenarien verwendet werden:

·Auf dem Fensterobjekt. Zum Beispiel $(window).load(fn);.

· Elemente mit URLs (Bilder, Skripte, Frames, Iframes). Zum Beispiel $("img").load(fn);.

Außerdem gibt es für kein Element ein Ladeereignis, wie zum Beispiel: $(document).load(fn); das ist falsch geschrieben und wird überhaupt nicht ausgeführt.

Das Ladeereignis muss vollständig geladen sein, bevor die Seite ausgelöst werden kann. Das sogenannte vollständige Laden bedeutet nicht nur, dass die DOM-Struktur geladen wird, sondern auch, dass alle Linkreferenzen geladen werden. Wenn sich beispielsweise eine große Anzahl von Bildern auf der Seite befindet, müssen Sie warten, bis jedes Bild vollständig geladen ist.

Das Wichtigste ist, dass im offiziellen jQuery-Dokument eindeutig angegeben ist, dass die browserübergreifende Kompatibilität des Ladeereignisses sehr schlecht ist (es funktioniert weder konsistent noch browserübergreifend zuverlässig). Nach Xiaocai-Tests unterstützt Google Chrome nur $(window).load(fn);, während Firefox $(window).load(fn); und $("img").load(fn); unterstützt.

Daher wird dringend davon abgeraten, das Ladeereignis zu verwenden, es sei denn, dies ist erforderlich.

Lassen Sie uns abschließend über „ready“ sprechen. Das „ready“-Ereignis kann zu jedem Element hinzugefügt werden, z. B. $(window).ready(fn);, $(document).ready(fn);, $(„div“). .ready(fn );etc.

Für das Ready-Ereignis muss die Seite nicht vollständig geladen sein, sie muss nur geladen werden, um die DOM-Struktur auszulösen.

Mehrere Bereitschaftsereignisse können gleichzeitig registriert werden. Bei der Ausführung werden sie in der Reihenfolge der Registrierung ausgeführt. Beachten Sie, dass selbst wenn Sie die Bereitschaftsereignisse verschiedener Elemente registrieren, diese der Reihe nach ausgeführt werden. Zum Beispiel der folgende Code:

Code kopieren Der Code lautet wie folgt:

$(window).ready(function(){
alarm("window");
});
$(document).ready(function(){
alarm("document");
});
$("div").ready(function(){
alarm("div");
});

Nach dem gesunden Menschenverstand sollte das Div zuerst geladen werden, also wird zuerst Alert("div"); und dann Alert("document"); oder Alert("window"); ausgeführt, aber leider wird Alert( "div"); ist der letzte ausgeführte. Unabhängig davon, ob das Ready-Ereignis auf demselben Element registriert ist oder nicht, wird es daher in der Reihenfolge der Registrierung ausgeführt.

Das letzte Element, das Ready-Ereignis, verursacht einen Konflikt mit window.onload (oder ). Das Ready-Ereignis wird nicht ausgeführt.

Nach so vielen Diskussionen wurde endlich bewiesen, dass: $(document).ready(fn); die beste Kompatibilität und Sicherheit bietet. Wenn ein solcher Bedarf besteht, versuchen Sie, diese Methode zu verwenden.