logo

jQuery ready() funksjon

De klar() funksjonen i jQuery kjører koden bare når DOM (Document Object Model) er fulllastet. Det er en innebygd funksjon i jQuery. Den kan utløses før lasting av alle bilder osv. men bare når DOM er klar. Koden satt inn mellom $(document).ready() kjøres bare når siden er klar til å kjøre JavaScript-kode.

Vi bør ikke bruke klar() metode sammen med .

Syntaks

Vi kan bruke klar() fungerer på to måter, som gitt nedenfor.

java dobbel til streng
  • Den ofte brukte syntaksen til klar() funksjonen er som følger.
 $(document).ready(function) 
  • Som vi kan bruke klar() funksjon bare for gjeldende dokument, slik at velgeren kan hoppes over. Vi kan også skrive syntaksen ovenfor som følger.
 $(function) 

Begge de ovennevnte måtene er gyldige å bruke. Den andre syntaksen kan brukes som et alternativ til den første syntaksen. Det kan fremgå av følgende kodebit.

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

Koden ovenfor tilsvarer koden nedenfor.

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

Noen erfarne utviklere bruker stenografien $() heller enn å bruke $(document).ready(), men hvis vi skriver koden for ikke-erfarne personer, så er det bedre å bruke den lange formen.

Parameterverdier

De klar() funksjonen har bare en enkelt parameterverdi definert som følger.

funksjon(): Det er den obligatoriske parameteren som spesifiserer funksjonen som utføres etter at dokumentet er lastet.

La oss se et eksempel på bruk av $(document).ready() funksjon.

Eksempel

I dette eksemplet er det noen avsnittselementer og en knapp. Her bruker vi $(document).ready() funksjon for å endre stilen til de gitte avsnittene.

sentrere bilder i css
 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 det nå

Produksjon:

Etter utførelse av koden ovenfor, vil utgangen være -

jQuery ready() funksjon

Etter å ha klikket på den gitte knappen, vil utgangen være -

jQuery ready() funksjon