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(){ $('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 Test det nå Produksjon:
Etter utførelse av koden ovenfor, vil utgangen være -
Etter å ha klikket på den gitte knappen, vil utgangen være -
