JQuery framework

Úvod do jQuery

jQuery je framework pre objektovo orientovaný skriptovací jazyk JavaScript. Kladie dôraz na interakciu medzi JavaScriptom a HTML. Jeho syntax je navrhnutá pre jednoduchšiu navigáciu dokumentu, výber DOM elementov, vytváranie animácií, spracovanie udalostí, a vývoj AJAX aplikácií. jQuery taktiež poskytuje možnosti pre vývojárov na vytváranie pluginov postavených na jazyku JavaScript.

Základ jQuery tvorí súbor jquery.js, ktorý je voľne k stiahnutiu na oficiálnej stránke http://jquery.com/. Súbor po stiahnutí uložíme do adresára s webovým obsahom a k HTML stránke ho nalinkujeme príkazom:

<script language="javascript" type="text/javascript" src="/jscripts/jquery.js"></script>

Hodnota parametra src deklaruje umiestnenie súboru jquery.js. Po stiahnutí a nalikovaní súboru je jQuery pripravený pre použitie. Všetky javaskript akcie je najlepšie vykonávať až po načítaní celej HTML stránky. jQuery to umožňuje nasledovne pomocou funkcie:

$(document).ready(function(){
	nas kod
});

Do tela funkcie (nas kod) píšeme, ktoré sa vykonajú až bude celá stránka načítaná.

Výber prvkov

Výber prvkov v HTML stránke pomocou jQuery je jednoduchý. Odborne sa nazývajú selektory. Je to spôsob akým vyberieme na stránke určitý objekt, napríklad odkaz, alebo odstavec. Následne s ním môžeme ďalej pracovať, napríklad ho necháme pomaly zmiznúť alebo zobraziť. Samozrejme pomocou jQuery môžeme s prvkami robiť omnoho viac.

Odstavec v HTML tagu zapíšeme nasledovne:

<p id="odstavec">Výber prvkov v jQuery</p>

kde odstavec je identifikátor objektu p, ktorý v jQurey identifikujeme zápisom #odstavec. Symbol # (mriežka) je pred názvom identifikátora povinný. Zápis v jQuery bude nasledovný:

$(document).ready(function(){
	$("#odstavec").hide(1000);
});

Metóda hide() slúži pre skrytie objektu, ktorú pripojíme za selektor pomocou bodky. Do zátvoriek metódy zadáme hodnotu, ktorá reprezentuje čas trvania miznutia napr. jednu sekundu (t.j., 1000 milisekund.). Na zobrazenie objektu slúži metódu show(), ktorú použijeme obdobne ako metódu hide().

Hodnota parametra ID prvku v HTML stránke môže podľa pravidiel obsahovať bodku alebo aj hranaté zátvorky. Zápis takého ID sa vykoná nasledovne:

$("#moj\.odstavec")

funguje teda pre výber prvku s id = "moj.odstavec". Pred hranaté zátvorky alebo bodky je potrebné písať lomítko.

Na výber viacerých prvkov, ktoré majú rovnakú triedu vzhľadom k tomu, že javaskript neobsahuje príkaz getElementByClassName by sme museli vytvoriť svoju vlastnú funkciu. jQuery rieši daný problém nasledovne.

Zápis prvkov v HTML kóde:

<p class="vsetky_odstavce">Prvý odstavec</p>
<p class="vsetky_odstavce">Druhý odstavec</p>
<p id=“moj_odstavec“>Tretí odstavec</p>

Zápisom v jQuery, uvedeným nižšie, zmiznú všetky odstavce triedy vsetky_odstavce. V našom prípade je to prvý a druhý odstavec.

$(".vsetky_odstavce").hide(1000);

Nasledujúcim zápisom zmiznú všetky odstavce (aj tretí odstavec) objektu p na stránke bez ohľadu nato akú mali triedu alebo ID:

$("p").hide(1000);

V jQuery je niekoľko spôsobov výberu prvkov, ktoré možeme použiť. Výber viacerých prvkov oddelených pomocou čiarky je nasledovný:

$("p, a, div, #moj_odstavec").hide(1000);

Pri výbere prvku z iného prvku použijeme nasledujúci zápis, ktorý skryje všetky spany v odstavci:

$("#moj_odstavec span").hide(1000);

Pri výbere prvého prvku v inom prvku napr. prvý riadok v tabuľke alebo prvý span v odstavci. K spanu pridáme dvojbodku a za ňou napíšeme, že nás zaujíma iba prvý span. Samozrejme je možné vybrať aj posledný alebo napr. párny:

$("#moj_odstavec span:first").hide(1000);

Ak sa chceme získať hodnotu niektorej položky v <select> použijeme metódu val(), ktorá nám vráti hodnotu danej položky.

var CoJeVybrane = $("#moj_select option:selected").val();