logo

jQuery ready()-funktio

The valmis() jQueryn toiminto suorittaa koodin vain, kun DOM (Document Object Model) on ladattu täyteen. Se on jQueryn sisäänrakennettu toiminto. Se voi käynnistyä ennen kaikkien kuvien lataamista jne., mutta vain kun DOM on valmis. Väliin lisätty koodi $(asiakirja).ready() suoritetaan vain, kun sivu on valmis JavaScript-koodin suorittamista varten.

Meidän ei pitäisi käyttää valmis() menetelmä yhdessä .

Syntaksi

Voimme käyttää valmis() toimivat kahdella tavalla alla kuvatulla tavalla.

  • Yleisesti käytetty syntaksi valmis () toiminto on seuraava.
 $(document).ready(function) 
  • Kuten voimme käyttää valmis() toiminto vain nykyiselle asiakirjalle, joten valitsin voidaan ohittaa. Voimme myös kirjoittaa yllä olevan syntaksin seuraavasti.
 $(function) 

Molemmat yllä olevat tavat kelpaavat käytettäväksi. Toista syntaksia voidaan käyttää vaihtoehtona ensimmäiselle syntaksille. Se voi olla selvää seuraavasta koodinpätkästä.

base64-dekoodaus js:ssä
 $(document).ready(function() { $('p').css('color', 'red'); }); 

Yllä oleva koodi vastaa alla olevaa koodia.

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

Jotkut kokeneet kehittäjät käyttävät lyhennettä $() käyttämisen sijaan $(asiakirja).ready(), mutta jos kirjoitamme koodia kokemattomille ihmisille, niin on parempi käyttää pitkää muotoa.

Parametrien arvot

The valmis() funktiolla on vain yksi parametriarvo, joka määritellään seuraavasti.

funktio(): Se on pakollinen parametri, joka määrittää toiminnon, joka suoritetaan asiakirjan lataamisen jälkeen.

Katsotaanpa esimerkkiä $(asiakirja).ready() toiminto.

Esimerkki

Tässä esimerkissä on joitain kappaleelementtejä ja painike. Tässä meillä on käytössä $(asiakirja).ready() toiminto muuttaa annettujen kappaleiden tyyliä.

 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 
Testaa nyt

Lähtö:

Yllä olevan koodin suorittamisen jälkeen tulos on -

jQuery ready()-funktio

Kun napsautat annettua painiketta, tulos on -

jQuery ready()-funktio