Inhaltsverzeichnis:
- Wie benutze ich $ (Dokument)? ready ()
- Das Dokument verwenden. Fertig-Mechanismus
- Alternativen zum Dokumentieren. ready
Video: Wie funktioniert #AJAX eigentlich? [Tutorial] 2024
Viele HTML5- und CSS3-Seiten benötigen eine Initialisierungsfunktion. Der Body-Onload-Mechanismus wird häufig in DOM / JavaScript verwendet, um Seiten zu laden, sobald das Dokument geladen wurde. Dies ist eine Funktion, die frühzeitig ausgeführt wird, um den Rest der Seite einzurichten. Während body onload diese Aufgabe gut erfüllt, gibt es bei der traditionellen Technik einige Probleme:
-
Es muss eine Änderung an der HTML vorgenommen werden. Der JavaScript-Code sollte vollständig von HTML getrennt sein. Sie sollten Ihren HTML-Code nicht ändern müssen, damit er mit JavaScript funktioniert.
-
Das Timing stimmt immer noch nicht. Der in body onload angegebene Code wird erst ausgeführt, nachdem die gesamte Seite angezeigt wurde. Es wäre besser, wenn der Code registriert wurde, nachdem das DOM geladen wurde, aber , bevor die Seite anzeigt.
Wie benutze ich $ (Dokument)? ready ()
jQuery hat eine großartige Alternative zum Body-Onload, die diese Mängel überwindet. Schauen Sie sich den Code an, um zu sehen, wie es funktioniert:
fertig. html $ (Dokument). bereit (changeMe); Funktion changeMe () {$ ("# output"). html ("Ich habe gewechselt");}
Das Dokument verwenden. Fertig-Mechanismus
Hat sich das geändert?
Dieser Code verwendet die jQuery-Technik zum Ausführen des Initialisierungscodes:
-
Das body-Tag hat kein onload -Attribut mehr. Dies ist eine übliche Eigenschaft der jQuery-Programmierung. Der HTML-Code hat keine direkten Links mehr zum JavaScript, da jQuery den JavaScript-Code an die Webseite anhängen lässt.
-
Die Initialisierungsfunktion wird mit dem $ (Dokument) erstellt. Funktion ready () . Diese Technik veranlasst den Browser, eine Funktion auszuführen, wenn das DOM geladen wurde (damit es auf alle Elemente des Formulars zugreifen kann), aber bevor die Seite angezeigt wird (damit alle Effekte des Formulars dem Benutzer sofort angezeigt werden)).
-
$ document erstellt ein jQuery-Objekt aus dem gesamten Dokument. Das gesamte Dokument kann in ein jQuery-Objekt umgewandelt werden, indem das Dokument in der Funktion $ () angegeben wird. Beachten Sie, dass Sie in diesem Fall keine Anführungszeichen verwenden.
-
Die angegebene Funktion wird automatisch ausgeführt. In diesem speziellen Fall möchten Sie die changeMe () - Funktion ausführen, sodass Sie sie in den Parameter der ready () - Methode einfügen. Beachten Sie, dass sich dies auf changeMe als Variable bezieht, also keine Anführungszeichen oder Klammern hat.
Sie sehen mehrere andere Stellen (besonders in der Ereignisbehandlung), in denen jQuery eine Funktion als Parameter erwartet. Eine solche Funktion wird häufig als Callback -Funktion bezeichnet, weil sie aufgerufen wird, nachdem eine Art Ereignis aufgetreten ist.Außerdem sehen Sie Callback-Funktionen, die auf Tastaturereignisse, Mausbewegungen und den Abschluss einer AJAX-Anforderung reagieren.
Alternativen zum Dokumentieren. ready
Manchmal werden einige Verknüpfungen angezeigt, da der Initialisierungscode so häufig ausgeführt wird. Sie können
$ (Dokument) kürzen. bereit (changeMe);
zum folgenden Code:
$ (changeMe);
Wenn dieser Code nicht innerhalb einer Funktion definiert ist und changeMe eine auf der Seite definierte Funktion ist, führt jQuery die Funktion automatisch direkt wie das Dokument aus. bereit Ansatz.
Sie können auch direkt eine anonyme Funktion erstellen:
$ (Dokument). ready (function () {$ ("# output"). html ("Ich habe gewechselt");});
Diese (anonyme Funktion) Methode ist umständlich, aber Sie sehen häufig jQuery-Code mit dieser Technik. Sie können eine Funktion namens init () erstellen und diese mit einer Zeile wie folgt aufrufen:
$ (init);
Diese Technik ist einfach und leicht verständlich, aber Sie können die anderen Variationen bei der Untersuchung von Code im Web entdecken.
