Vanille Javascript Äquivalent zu Jquerys $ $.bereit?

Während der Entwicklung von Websites verwenden Programmierer das einfache JavaScript mit dem Namen ““Vanille JavaScript"Und die JavaScript -Bibliothek"JQuery”. Viele moderne Webentwicklungs -Frameworks und Bibliotheken fördern oder müssen sogar Vanille -JavaScript anstelle von JQuery verwenden, da es effizienter, flexibler und leichter zu verstehen und zu warten ist.

In diesem Blog wird das Vanille -JavaScript -Äquivalent des JQuery $ demonstriert.Ready () Methode.

Vanille Javascript Äquivalent zu Jquerys $ $.bereit()

Das Vanille -JavaScript -Äquivalent zu Jquerys $ $.Ready () Funktion ist die “dokumentieren.addEventListener ("DomContentLode", function () …);”Funktion.

So verwenden Sie das Ereignis „Domcontent“ von Vanilla JavaScript?

“Domcontent geladenIst ein Ereignis in JavaScript, das abgefeuert oder ausgelöst wird, ohne auf Stylesheets, Grafiken oder Unterfächer warten zu müssen, bevor sie den grundlegenden HTML -Inhalt analysieren.

Syntax

Element.AddEventListener (Ereignis, Funktion, Usecapture);

In dieser Syntax:

• “FallIst der erste Parameter, der ein gültiges JavaScript -Ereignis sein kann.
• “FunktionIst die Hauptbehörde, die ausgeführt wird, wenn das Ereignis ausgelöst wird.
• “usecaptureIst ein optionaler Parameter.

Beispiel

In diesem Beispiel wird Skript ausgeführt, wenn das DOM mit Vanille -JavaScript vollständig geladen wird.

Dazu erstellen wir Überschriften in einer HTML -Datei, die nach dem Laden der Seite auf der Seite angezeigt wird:

Vanille JavaScript

DOM ist voll beladen

In "Tag, anzeigen Sie eine Warnmeldung beim Laden der Seite und drucken Sie die Nachricht auf der Konsole, wenn die Seite geladen wird:

Nach dem obigen Code -Snippet:

• Aufrufen "AddEventListener ()"Methode mit dem Ereignis"Domcontent geladenUnd eine Funktion, die nach dem Laden der gesamten Seite eine Nachricht druckt.
• Das Dialogfeld "Alarm" wird vor dem Laden der Seite angezeigt.

Es kann beobachtet werden, dass der Inhalt angezeigt wurde, wenn das DOM vollständig geladen ist:

So verwenden Sie JQuery $ Ready () -Funktion?

Der "$.bereit()Die Funktion in JQuery wird verwendet, um eine Funktion oder einen Codeblock auszuführen, sobald das DOM bereit ist/zur Manipulation verfügbar ist. Dies bedeutet, dass die Funktion ausgeführt wird, sobald die Seite geladen und analysiert wird, aber vor allen anderen Ressourcen, wie z.

Syntax

Für die "bereit()”Funktion In JQuery verwenden Sie die untergegebene Syntax:

$ (Dokument).Ready () Body

In dieser Syntax die “KörperWird ausgeführt, nachdem die gesamte Seite vollständig geladen ist.

Beispiel

Im folgenden Beispiel wird das spezifische HTML -Dokument das Element auf der Schaltfläche ausblenden Klicken Sie nach dem Laden der gesamten Seite.

Für die Verwendung von JQuery in Ihrem Code ist es wichtig, zuerst die Bibliothek zu laden:

Fügen Sie einige Inhalte in der HTML -Datei hinzu, die auf der Seite nach dem Laden des DOM angezeigt werden:

JQuery Ready () Funktion

DOM ist voll beladen

Das Element verstecken

Zeigen Sie im Tag zuerst eine Warnmeldung an, während Sie das DOM laden. Verstecken Sie nach dem Anzeigen des Inhalts die Überschrift, während Sie auf die Schaltfläche klicken:

Es ist ersichtlich, dass der Inhalt nach dem Laden des DOM -Elements auf der Seite geladen wurde und die Überschrift auf der Schaltfläche Klick ausblättert:

Das war alles um das Äquivalent zu jQuery $ ready () -Funktion in Vanille JavaScript.

Abschluss

Der "Domcontent geladen"Ereignis entspricht JQuery's"$.bereit()" Methode. Das "Domcontent geladen" und das "$.Ready () ”wird vor dem Lastereignis abgefeuert. Dies bedeutet, dass Sie damit Code ausführen können, sobald das DOM fertig ist, ohne darauf zu warten, dass alle Ressourcen geladen werden. Dieser Blog demonstrierte das Vanille -JavaScript -Äquivalent zum JQuery $.Ready () Methode.