Viele HTML5 und CSS3 Seiten erfordern eine Funktion zur Initialisierung. Das body onload

Mechanismus ist in der DOM / javascript, um Seiten zu laden, sobald das Dokument Laden begonnen hat häufig verwendet. Dies ist eine Funktion, die den Rest der Seite früh einzurichten Lauf. Während body onload übernimmt diese Aufgabe gut, ein paar Probleme mit der traditionellen Technik existieren:

• Es erfordert es, eine Änderung des HTML. Der javascript-Code sollte vollständig aus HTML getrennt werden. Sie sollten es nicht mit javascript machen Sie Ihre HTML ändern müssen zu arbeiten.

• Der Zeitpunkt ist noch nicht ganz richtig. Der Code angegeben in body onload wird nicht ausgeführt, bis die gesamte Seite angezeigt wird. Es wäre besser, wenn der Code registriert wurde nach das DOM geladen wird, aber Vor die Seite wird angezeigt.

Wie .ready $ (document) zu verwenden ()

jQuery hat eine großartige Alternative zu body onload dass überwindet diese Mängel. Werfen Sie einen Blick auf den Code zu sehen, wie es funktioniert:

 
Mit dem document.ready Mechanismus
Hat diese Änderung?

Dieser Code verwendet die jQuery-Technik für die Initialisierung Code ausgeführt wird:

• Der Body-Tag nicht mehr hat einonload Attribut. Dies ist ein gemeinsames Merkmal der jQuery-Programmierung. Die HTML nicht mehr direkte Anbindung an die javascript weil jQuery der javascript-Code lässt sich Seite an den Web befestigen.

• Die Initialisierungsfunktion wird mit dem erstellt $ (Document) .ready () Funktion. Diese Technik weist den Browser eine Funktion auszuführen, wenn der DOM fertig geladen ist (so dass sie Zugang zu allen Elementen der Form), aber vor der Seite angezeigt wird (so, dass die Auswirkungen des Formulars für den Benutzer augenblicklich erscheinen).

• $ document macht ein jQuery-Objekt aus dem gesamten Dokument. Das gesamte Dokument kann in ein jQuery-Objekt gedreht werden durch die Angabe Dokument innerhalb der $ () Funktion. Beachten Sie, dass Sie keine Anführungszeichen in diesem Fall verwendet werden.

• Die angegebene Funktion ist automatisch ausgeführt. In diesem speziellen Fall soll das laufen ändere mich() Funktion, so legen Sie es in den Parameter des bereit() Verfahren. Beachten Sie, dass dies bezieht sich auf ändere mich als eine Variable, so dass es keine Anführungszeichen oder Klammern hat.

Sie sehen mehreren anderen Orten (vor allem in der Ereignisverarbeitung), wo jQuery eine Funktion als Parameter erwartet. Eine solche Funktion wird häufig als bezeichnet Rückrufen Funktion, weil es heißt, nachdem irgendeine Art von Ereignis aufgetreten ist. Sie sehen auch Callback-Funktionen, die auf Tastaturereignisse, Mausbewegung, und den Abschluss eines AJAX-Anfrage antworten.

Alternativen zu document.ready

Sie sehen manchmal ein paar Abkürzungen, weil es so üblich ist, die Initialisierung Code auszuführen. Sie können verkürzen

 $ (Document) .ready (changeme) -

zu den folgenden Code:

 $ (Changeme) -

Wenn dieser Code nicht innerhalb einer Funktion definiert und ändere mich automatisch direkt eine Funktion auf der Seite definiert, jQuery die Funktion läuft wie die document.ready Ansatz.

Sie können auch eine anonyme Funktion direkt zu erstellen:

 $ (Document) .ready (function () {. $ ( "# Ausgang") html ( "I changed") -}) -

Diese (anonyme Funktion) Methode ist umständlich, aber man häufig jQuery-Code mit dieser Technik zu sehen. Sie können eine Funktion erstellen, genannt drin() und nennen Sie es mit einer Zeile wie folgt aus:

$ (Init) -

Diese Technik ist einfach und leicht zu verstehen, aber man kann die anderen Variationen auftreten, wie Sie Code im Web zu untersuchen.