(3) První kód
První jQuery kód
Do souboru myJquery.js z minulého dílu umístíme tento kód, který zajistí, že vše, co do něj napíšeme, bude spuštěno až po úplném načtení souboru (resp. po načtení elementů DOM, takže ještě před načtením obrázků).
$(document).ready(function(){ /*Sem budeme psát veškerý jQuery kód*/ });
Jak vypadá jQuery kód
JQuery má jednoduchou syntaxi, která usnadňuje psaní kódu.
$("prvek, se kterým chceme něco udělat").funkce("parametr/y funkce"); // Příklad vybrání prvku a provedení nějaké činnosti s vybraným prvkem
Oproti javascriptu je výsledný kód v průměru zhruba dvakrát až třikrát kratší.
$("prvek").funkce("parametry"); document.getElementById("prvek").funkce("parametry"); // Srovnání s javascriptem - oba řádky udělají to samé
Znak $ zastupuje jQuery, takže je jedno, kterou možnost si vybereme. Já budu používat první možnost ($), protože je to kratší.
$("prvek, se kterým chceme něco udělat").funkce("parametr/y funkce"); jQuery("prvek, se kterým chceme něco udělat").funkce("parametr/y funkce"); // Oba řádky jsou ekvivalentní(=stejné)
JQuery navíc podporuje tkz. řetězení, takže můžeme napsat více po sobě jdoucích funkcí bez toho, abychom opisovali zbytek kódu. Hlavně nezapomeňte na středník na konci, jedná se o častou chybu.
$("prvek").funkce("parametry").funkce2("parametry").funkce3("parametry"); //Příklad řetězení
Hello world!
Teď si vytvoříme první program pomocí jQuery, který vypíše Hello world!.
// HTML část <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jQuery - Hello world!</title> <script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script charset="UTF-8" src="js/myJquery.js"></script> </head> <body> <div id="odstavec"> </div> </body> </html> // jQuery část $(document).ready(function(){ $("#odstavec").text("Hello world!"); });
Ukázku najdete zde