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(){ $('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 Tesztelje most Kimenet:
A fenti kód végrehajtása után a kimenet a következő lesz:
Az adott gombra kattintás után a kimenet a következő lesz:
