logo

jQuery ready() funktion

De redo() funktion i jQuery exekverar koden endast när DOM (Document Object Model) är fulladdat. Det är en inbyggd funktion i jQuery. Den kan avfyras innan laddning av alla bilder etc. men bara när DOM är redo. Koden infogat mellan $(document).ready() körs endast när sidan är redo för JavaScript-kod att köras.

Vi bör inte använda redo() metod tillsammans med .

Syntax

Vi kan använda redo() fungerar på två sätt, enligt nedan.

java concat sträng
  • Den vanligaste syntaxen för den redo() funktionen är som följer.
 $(document).ready(function) 
  • Som vi kan använda redo() fungerar endast för det aktuella dokumentet, så väljaren kan hoppas över. Vi kan också skriva ovanstående syntax enligt följande.
 $(function) 

Båda ovanstående sätt är giltiga att använda. Den andra syntaxen kan användas som ett alternativ till den första syntaxen. Det framgår tydligt av följande kod.

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

Ovanstående kod motsvarar koden nedan.

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

Vissa erfarna utvecklare använder stenografin $() snarare än att använda $(document).ready(), men om vi skriver koden för icke-erfarna personer, så är det bättre att använda den långa formen.

Parametervärden

De redo() Funktionen har bara ett enda parametervärde definierat enligt följande.

fungera(): Det är den obligatoriska parametern som anger funktionen som körs efter att dokumentet har laddats.

atoi c

Låt oss se ett exempel på hur du använder $(document).ready() fungera.

kvartal under året

Exempel

I det här exemplet finns det några styckeelement och en knapp. Här använder vi $(document).ready() funktion för att ändra stilen för de givna styckena.

 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 
Testa det nu

Produktion:

Efter exekvering av ovanstående kod kommer utgången att vara -

jQuery ready() funktion

Efter att ha klickat på den givna knappen kommer utgången att vara -

jQuery ready() funktion