logo

jQuery ready()-functie

De klaar() -functie in jQuery voert de code alleen uit als het DOM (Document Object Model) volledig is geladen. Het is een ingebouwde functie in jQuery. Het kan worden geactiveerd voordat alle afbeeldingen enz. zijn geladen, maar alleen als de DOM gereed is. De code tussengevoegd $(document).ready() wordt alleen uitgevoerd als de pagina klaar is om JavaScript-code uit te voeren.

We mogen de klaar() methode samen met de .

Syntaxis

Wij kunnen gebruik maken van de klaar() functioneren op twee manieren, zoals hieronder aangegeven.

nieuwe lijnpython
  • De veelgebruikte syntaxis van de klaar() functie is als volgt.
 $(document).ready(function) 
  • Omdat we de klaar() werkt alleen voor het huidige document, dus de selector kan worden overgeslagen. We kunnen de bovenstaande syntaxis ook als volgt schrijven.
 $(function) 

Beide bovenstaande manieren zijn geldig om te gebruiken. De tweede syntaxis kan worden gebruikt als alternatief voor de eerste syntaxis. Het kan duidelijk worden uit het volgende stukje code.

 $(document).ready(function() { $('p').css('color', 'red'); }); 

De bovenstaande code is gelijk aan de onderstaande code.

 $(function() { $('p').css('color', 'red'); }); 

Sommige ervaren ontwikkelaars gebruiken de afkorting $() in plaats van te gebruiken $(document).klaar(), maar als we de code schrijven voor niet-ervaren mensen, is het beter om de lange vorm te gebruiken.

Parameterwaarden

De klaar() functie heeft slechts één parameterwaarde die als volgt is gedefinieerd.

functie(): Het is de verplichte parameter die de functie specificeert die wordt uitgevoerd nadat het document is geladen.

jvm in Java

Laten we een voorbeeld bekijken van het gebruik van de $(document).ready() functie.

Python-lijst initialiseren

Voorbeeld

In dit voorbeeld zijn er enkele alinea-elementen en een knop. Hier gebruiken we $(document).ready() functie om de stijl van de gegeven paragrafen te wijzigen.

 jQuery ready() function $(document).ready(function(){ $(&apos;button&apos;).click(function(){ $(&apos;#p1&apos;).css({&apos;font-size&apos;: &apos;30px&apos;, &apos;color&apos;: &apos;blue&apos;, &apos;background&apos;: &apos;yellow&apos;, &apos;fontWeight&apos;: &apos;bold&apos;}); $(&apos;#p2&apos;).css({&apos;fontSize&apos;: &apos;20px&apos;, &apos;fontWeight&apos;: &apos;bold&apos;, &apos;color&apos;: &apos;red&apos;}); $(&apos;#p3&apos;).css({&apos;color&apos;: &apos;blue&apos;}); }); }); <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 
Test het nu

Uitgang:

Na de uitvoering van de bovenstaande code zal de uitvoer zijn:

jQuery ready()-functie

Nadat u op de gegeven knop hebt geklikt, zal de uitvoer zijn:

jQuery ready()-functie