Pomohl Vám můj web?
Podpořte psaní dalších článků!

jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další



(3) První kód

Kategorie: Ostatní články

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

Zobrazit diskuzi