Rozhodol som sa predstaviť jQuery [ http://www.jquery.com ] ako nástroj, pomocou ktorého si môžete na stránke vytvoriť zaujímavé efekty a animácie a dodať tak vašim stránkam trochu Web 2.0 looku. Pôjde teda o viacmenej pravidelnú sériu tutoriálov pre začiatočníkov s praktickými ukážkami zameranými na reálne využitie.
Trocha teórie
jQuery je JavaScriptovská knižnica, dalo by sa povedať, že dokonca až framework, ktorý vám má uľahčiť prácu s javaScriptom. Prináša množstvo efektov a taktiež podporu Ajaxu. Veľkou prednosťou tejto knižnice je jednoduchosť písania príkazov a najmä ich reťazenie."You start with 10 lines of jQuery that would have been 20 lines of tedious DOM JavaScript. By the time you are done it's down to two or three lines and it couldn't get any shorter unless it read your mind." - Dave Methvin [ http://www.nabble.com/Re%3A-Change-href-of-external-links-p7609630.html ]
“Začnete s 10-timi riadkami jQuery kódu, čo by v čistom DOM JavaScripte bolo 20. Kým ste však hotový, zredukuje sa váš kód na dva alebo tri riadky a kratšie sa to už naozaj zapísať nedá, jedine, že by to vedelo čítať vašu myseľ.” - preklad citátu Dave Methvin [ http://www.nabble.com/Re%3A-Change-href-of-external-links-p7609630.html ]-a prevzatého zo stránok jQuery.com
Aby ste si však vedeli aj predstaviť o čom tento citát hovorí, prikladám ukážku jQuery kódu:
$("p.surprise").addClass("ohmy").show("slow"); Spustiť kód [ http://jquery.mattonik.sk/examples/intro.html ]
Daný kód vyhľadá všetky odstavce (p), ktoré majú priradenú triedu „surprise“, priradí im triedu „ohmy“ a daný odstavec zobrazí pomocou animácie.
Pripojenie a načítanie jQuery
Na začiatok si vytvoríme testovaciu stránku, s ktorou budeme pracovať počas celého tohto seriálu.<html>
<head>
<script type="text/javascript" src="cesta/k/jquery.js"></script>
<script type="text/javascript">
// Sem pôjde jQuery kód
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>Ako si môžete všimnúť, do stránok voláme súbor *.js, čo je samotná jQuery knižnica, ktorú si môžete stiahnuť z domvoských stránok jQuery.
Ak si budete sťahovať svoju kópiu jQuery knižnice, máte na výber niekoľko verzií:
- Minimalizovanú (15kb)
- Zkomprimovanú (29kb)
- Plnú (94kb)
Najvýhodnejšie sa môže zdať používať v ostrej prevádzke minimalizovanú verziu (minimalizovaná neznamená oklieštená, použil sa pri jej tvorbe len iný kompresný algoritmus). Vedú sa však diskusie, že spracovanie takejto verzie je náročné na procesný výkon a nedá sa cachovať. Preto keď chcete používať lokálnu verziu jQuery knižnice, použite radšej plnú verziu, ktorá je podstatne menej náročná na spracovanie, zrýchlite tak celkový proces načítavania, a cachujte výstup – nebude potrebné ju načítavať vždy nanovo.
Osobne vám však odporúčam používať online verziu, ktorá zabezpečuje, že je vždy aktuálna a odpadá problém s jej neustálim hľadaním na disku a kopírovaním.
Ak chcete používať túto online verziu, do src k javascriptu napíšte
http://code.jquery.com/jquery-latest.pack.jsKeď už máme napojenú jQuery knižnicu do našej testovacej stránky, pozrieme sa na to, ako ju inicializujeme a môžeme sa vrhnúť na prvú ukážku.
Tí, ktorí už máte skúsenosti s JavaScriptom, by ste pravdepodobne začali písať niečo ako:
window.onload = function(){ alert("a") }Problémom však je, že akcia volaná takýmto zápisom sa vykoná až po načítaní kompletnej stránky – to znamená všetkých obrázkov, súborov, externých obrázkov, čo môže trvať celkom dlho. jQuery preto používa svoj spôsob volania a to pomocou:
$(document).ready(function(){
// Váš kód
});Znamená to, že jQuery kontroluje konkrétny element stránky a to konkrétne document. Ak je daný element pripravený na spracovanie, vykonajú sa príkazy vnútri tohto volania, preto aj všetok kód, ktorý budeme písať, budeme zapisovať práve do tejto funkcie.
Na rozdiel od bežnej JavaScriptovej kontroly window.onload, ktorá čaká na načítanie celej stránky, jQuery kontrola sa pýta iba na to, či je element document pripravený na spracovanie, to znamená, že nečaká na všetky obrázky a iné veľké súbory kým sa načítajú.
Náš prvý jQuery kód
Keďže už máme pripojené jQuery do našich stránok, môžeme sa pustiť do nášho prvého kódu. Obrovskou prednosťou jQuery je spôsob vyberania prvkov, s ktorými pracuje. Používa na to totiž CSS selektory! Predpokladám, že každý už má aké-také skúsenosti s CSS a tak by nemal byť pre vás problém pochopiť o čo ide. Pre tých, čo nevedia o čom je reč, dúfam, že pochopia z príkladov.
Prvá ukážka
Ako ste si mohli všimnúť, v našom HTML kóde, ktorý sme si vytvorili na začiatku, je odkaz na domovskú stránku jQuery. Teraz pomocou jQuery vyvoláme alert box, ktorý sa zobrazí po kliknutí na odkaz, avšak ešte predtým, ako sa dostaneme na danú stránku.
$("a").click(function(){
alert("Práve ste klikli na odkaz vedúci na domovskú stránku jQuery");
});Spustiť kód [ http://jquery.mattonik.sk/examples/1.html ]
Poďme si pekne po poriadku vysvetliť, čo čo robí:
$(“a”)– jQuery zápis pre vyhľadanie všetkých odkazov na stránke.click()– funkcia, ktorá kontroluje či bolo na daný element kliknuté, v našom prípade na elementafunction() {alert (“”) }– vykoná zavolanie samotného alert boxu, ktorý sa zobrazí po kliknutí
Pomocou jQuery môžeme taktiež meniť správanie sa elementov. Pre lepšie pochopenie si upravíme náš predošlý príklad. Zabránime, aby sa po kliknutí na odkaz načítala stránka jquery.com, zobrazí sa nám len alert box.
$("a").click(function(){
alert("Práve ste klikli na odkaz vedúci na domovskú stránku jQuery");
return false;
});Spustiť kód [ http://jquery.mattonik.sk/examples/1b.html ]
Záver
Teraz by ste už mali zvládnuť načítať a spustiť jQuery knižnicu vo vašich stránkach. Taktiež sme si ukázali prvú ukážku, ktorá síce ešte nie je moc praktická, no potrebná pre základné pochopenie funkčnosti jQuery.