Jirkův blogísek

jQuery (domovská stránka) je jednoznačně jedna z nejpoužívanějších JavaScriptových knihoven na webu. Stejně jako jí podobné knihovny (například Prototype) velmi výrazně usnadňuje skriptování HTML stránek ve stylu Webu 2.0 zejména tím, že

• jednak do JavaScriptu přináší XPath a CSS selectory a zjednodušuje navazování JavaScriptového kódu na HTML stránku – už žádné GetElementById()!,
• druhak nabízí mocné nástroje pro přidávání “onNěco” efektů, animací nebo prostou manipulaci DOM, zkrátka veškeré webové skriptování.
• Třešničkou na dortu je podpora AJAXu, který přes jQuery provedete snadněji, rychleji a přehledněji, než kdy dřív
• a zlatým hřebem pak možnost rozšířit si jQuery pomocí tisíce pluginů, co se válí na webu. Chcete mít rychle galerii fotek? Vygooglete si na to plugin!

Pokud chcete prozkoumat jQuery podrobněji, doporučuju rozhodně začít s Quick Start tutorial a Od každého něco tutorial na stránkách knihovny. Další texty, tutoriály i dokumentaci najdete tamtéž. Z externích zdrojů je možná dobré mrknout se na článek JavaScript Dollar Sign ($) – What is it for?, který se zabývá znakem dolaru, který je v jQueryovských (i Prototypovských) skriptech velice hojný.

Bratrstvo dolaru

jQuery je zabalená ve stejnojmenném objektu. Psát pořád jQuery, to se ale nikomu nechce, a tak se ten objekt pojmenuje $, což je v JavaScriptu zcela legální jméno proměnně. Stejnětak bychom mohli udělat

var _ = $

a psát místo dolaru podtržítko. Navíc, jak je uvedeno ve výše odkazovaném článku, dolar je sexy.

Já a jQuery

V jQuery jsem si z hecu vytvořil malou fotogalerii pro pět fotek Gymnázia Křenová (demo je tu taky). Má spoustu slabin, do praxe se moc nehodí, ale tu stránku co tvoříme v IVT myslím vyšperkuje

V kódu bych chtěl vyzdvihnout zejména tyto momenty:

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>

Tady nám knihovnu jQuery hostuje Google. Je vysoká pravděpodobnost, že klienti ji budou mít v chache prohlížeče, navíc to zjednodušuje aktualizaci knihovny. Nevýhodou je, že se dáváme všanc jedné firmě. Moje galerie totiž neumí “se ctí zdegradovat” a bez jQuery je nepoužitelná.

<div id="image-thumb">
 <ul>
 <li>
 <img src="fasada.jpg" alt="Náš buldynek, Gymnasium se staromileckým es.">
 </li>
 <li>
 <img src="PIC26.jpg" alt="Chtělo by to výtah. AFAIK na Jarošce výtah mají  ">
 </li>
 <li>
   ....

Obrázky, se kterými pracujeme, jsou normálně uvedené v kódu stránky. Není potřeba psát nějakou JavaScriptovou strukturu (nejspíš pole) s adresama a popiskama. Díky jQuery si tohle všechno ze stránky rychle vytáhneme. To by se hodilio, kdybych chtěl zapracovat na graceful degradation.

$(document).ready(function() {
 // This is more like it!
 // Přípravné práce
 // Zobrazíme první obrázek v seznamu
 var img = $("#image-thumb img").eq(0);
 img.addClass("activ");

Konečně se dostáváme k jQuery (přistupujeme k ní přes dolar). Takhle pěkně stvoříme nepojmenovanou funkci, která se zavolá, až bude stránka pro nás připravená. $(document).ready je událost zavolaná v okamžiku, kdy se stránkou můžeme bezpečně manipulovat z JavaScriptu (nemusí být ještě úplně vykreslená, mohou chybět obrázky. Máme vytvořený DOM, a to je to, na čem záleží)

Takové to

$("#image-thumb img").eq(0)

je elementární použítí selektorů. Ze stránky vybereme to, co je obrázek vnořený v divu s id image-thumb a pomocí .eq(0) si vezmeme ten první obrázek. Jednoduché

$("#caption-container").click( function(a) {
 $(this).fadeOut("fast");
 });

Tři řádky kódu a otravný popisek co má nastavené id caption-container už je možné schovat kliknutím na něj. Navíc se to zanimuje – to je to fadeOut.

if($(this).is(".activ")) {return true;}

Jak rychle vyběhnout z funkce, pokud má prvek class=activ.

function display(src, alt) {
 $("#image-container > img").attr("src", src);
 $("#image-container .desc").html(alt);
 return true;
 }

Dejte téhle funkci adresu a popisek, a ona vám ho zobrazí v divu #image-container

Ještě tu mám nějaké animace, ale to jsem jen tak zbastlil, aby to jelo, tak tím se chlubit nebudu

Závěr

Ukázali jsme si, že s jQuery se dají elegantně dělat poměrně efektní věci. Pokud ještě s použitím jQuery váháte, přečtěte si adoption story na odkazovaném webu.

Pages: