logo

jQuery ready() függvény

A kész() A jQuery függvény csak akkor hajtja végre a kódot, ha a DOM (Document Object Model) teljesen betöltődött. Ez a jQuery beépített funkciója. Az összes kép stb. betöltése előtt aktiválódhat, de csak akkor, ha a DOM készen áll. A közé beszúrt kód $(dokumentum).ready() csak akkor fut le, ha az oldal készen áll a JavaScript-kód végrehajtására.

Ne használjuk a kész() módszerrel együtt a .

Szintaxis

Használhatjuk a kész() kétféleképpen működik, az alábbiak szerint.

  • Az általánosan használt szintaxis a kész () funkciója a következő.
 $(document).ready(function) 
  • Ahogy tudjuk használni a kész() funkció csak az aktuális dokumentumhoz, így a választó átugorható. A fenti szintaxist a következőképpen is felírhatjuk.
 $(function) 

Mindkét fenti mód használható. A második szintaxis az első szintaxis alternatívájaként használható. A következő kódrészletből egyértelműen kiderül.

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

A fenti kód egyenértékű az alábbi kóddal.

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

Néhány tapasztalt fejlesztő a gyorsírást használja $() használata helyett $(dokumentum).ready(), de ha nem tapasztalt embereknek írjuk a kódot, akkor jobb a hosszú formát használni.

Paraméterértékek

A kész() függvénynek csak egyetlen paraméterértéke van az alábbiak szerint definiálva.

funkció(): Ez a kötelező paraméter, amely a dokumentum betöltése után végrehajtandó funkciót határozza meg.

Lássunk egy példát a $(dokumentum).ready() funkció.

Példa

Ebben a példában néhány bekezdéselem és egy gomb található. Itt használjuk $(dokumentum).ready() funkcióval módosíthatja az adott bekezdések stílusát.

 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 
Tesztelje most

Kimenet:

A fenti kód végrehajtása után a kimenet a következő lesz:

jQuery ready() függvény

Az adott gombra kattintás után a kimenet a következő lesz:

jQuery ready() függvény