Der bereit() Die Funktion in jQuery führt den Code nur aus, wenn das DOM (Document Object Model) vollständig geladen ist. Es handelt sich um eine integrierte Funktion in jQuery. Es kann vor dem Laden aller Bilder usw. ausgelöst werden, aber nur, wenn das DOM bereit ist. Der dazwischen eingefügte Code $(Dokument).ready() wird nur ausgeführt, wenn die Seite für die Ausführung von JavaScript-Code bereit ist.
Wir sollten das nicht verwenden bereit() Methode zusammen mit der .
Syntax
Wir können das nutzen bereit() Funktion auf zwei Arten, wie unten angegeben.
- Die häufig verwendete Syntax von das bereit() Die Funktion ist wie folgt.
$(document).ready(function)
- Wie wir das nutzen können bereit() Funktion nur für das aktuelle Dokument, daher kann der Selektor übersprungen werden. Wir können die obige Syntax auch wie folgt schreiben.
$(function)
Beide oben genannten Möglichkeiten sind gültig. Die zweite Syntax kann alternativ zur ersten Syntax verwendet werden. Dies kann aus dem folgenden Codeabschnitt deutlich werden.
$(document).ready(function() { $('p').css('color', 'red'); }); Der obige Code entspricht dem folgenden Code.
$(function() { $('p').css('color', 'red'); }); Einige erfahrene Entwickler verwenden die Kurzschrift $() anstatt zu verwenden $(Dokument).ready(), Wenn wir den Code jedoch für unerfahrene Personen schreiben, ist es besser, die Langform zu verwenden.
Parameterwerte
Der bereit() Die Funktion hat nur einen einzigen Parameterwert, der wie folgt definiert ist.
Funktion(): Es ist der obligatorische Parameter, der die Funktion angibt, die nach dem Laden des Dokuments ausgeführt wird.
Sehen wir uns ein Beispiel für die Verwendung an $(Dokument).ready() Funktion.
Beispiel
In diesem Beispiel gibt es einige Absatzelemente und eine Schaltfläche. Hier verwenden wir $(Dokument).ready() Funktion zum Ändern des Stils der angegebenen Absätze.
jQuery ready() function $(document).ready(function(){ $('button').click(function(){ $('#p1').css({'font-size': '30px', 'color': 'blue', 'background': 'yellow', 'fontWeight': 'bold'}); $('#p2').css({'fontSize': '20px', 'fontWeight': 'bold', 'color': 'red'}); $('#p3').css({'color': 'blue'}); }); }); <p id="p1"> Welcome to the javaTpoint.com </p> <p id="p2"> This is an example of using the $(document).ready() function. </p> <p id="p3"> This is a third paragraph element </p> <p> Click the following button to see the effect. </p> Click me Testen Sie es jetzt Ausgabe:
Nach der Ausführung des obigen Codes lautet die Ausgabe:
Nachdem Sie auf die angegebene Schaltfläche geklickt haben, lautet die Ausgabe:
