JavaScript s jQuery – lehký úvod

Chtěli jste někdy v Javascriptu pracovat s DOMem pomocí CSS selektorů? Ne? To nevadí, jQuery vám to stejně umožní. A nejen to, umožní vám i spoustu jiných zábavných věcí. Těšíte se?

Co je jQuery?

Framework jQuery je stručný. Framework jQuery je mocný. Framework jQuery je přehledný. Framework jQuery vám budou všichni závidět!

Tak tedy jQuery je JavaScriptový framework, který vám umožní snadno vyhledávat elementy DOMu, modifikovat je, i vytvářet nové. K vyhledávání vám postačí znát CSS, ale náročnější uživatelé mohou použít také XPath. Stejně tak vytváření nových HTML elementů je jednoduché, stačí zadat HTML kód a jQuery sám vytvoří patřičnou strukturu DOMu.

Frameworku jQuery nechybí samozřejmě ani další vymoženosti – umí pracovat s událostmi, nabízí pokročilé funkce pro práci s poli, nesmí samozřejmě chybět ani podpora AJAXu a animací.

Dost plků, sem s příklady!

Na příkladech asi nejrychleji pochopíte, proč je jQuery tak oblíbený. Tady je pár jednoduchých:

• K vyhledání všech odkazů můžeme použít CSS selektor:

  var odkazy = jQuery(„a“);

• Všechny odkazy můžeme zařadit do třídy „test“:

  jQuery(„a“).addClass(„test“);

• Můžeme také všem odkazům v nečíslovaných seznamech přikázat, aby při kliknutí pozdravily:

  var pozdrav = function () {
    alert(„Hallo World!“);
    return false;
  };
  jQuery(„ul a“).click(pozdrav);

• Stejně jednoduché je i vytváření elementů – následující kód přidá za každý odstavec div se zvýrazněným nápisem „Hello World“:

  jQuery(„p“).after(„<div><em>Hello World!</em></div>“);

Výukové články se spoustou příkladů najdete na stránce Tutorials.

Jak to funguje?

Základem je vždy volání funkce jQuery s nějakými parametry. Podle toho, jaké parametry dostane, funkce se inteligentně rozhodne, jakým způsobem je zpracuje. Nakonec vždy vrátí objekt typu jQuery obsahující kolekci HTML elementů, se kterými je možno dále pracovat, obvykle voláním metod objektu jQuery.

Zajímavým prvkem je metoda jQuery.extend, která umožňuje rozšiřovat funkcionalitu jQuery pomocí pluginů.

Vyhledání elementů DOMu

Elementy DOMu je možné vyhledávat pomocí selektorů CSS nebo XPath. CSS selektory se používají takto:

var paragraphs = jQuery(„p“);
var unsortedListItems = jQuery(„ul > li“);
var warningDivs = jQuery(„div.warning“);

XPath selektory vypadají takto:

var unsortedListItems = jQuery(„ul/li“);
var checkedInputs = jQuery(„//input[@checked]“);

Kromě toho jQuery umí vyhledávat i podle selektorů, které nepatří ani do CSS ani do XPath, ale jsou užitečné, například:

var hiddenParagraphs = jQuery(„p:hidden“);

Podrobné informace o selektorech naleznete na stránce DOM/Traversing/Selectors.

Práce s elementy DOMu

Jakmile vyhledáte nějaké elementy, můžete s nimi manipulovat. I k tomu vám jQuery poskytne silné prostředky. Nejvýmluvnější bude asi opět příklad. Následující kód vloží za každý odstavec v dokumentu element hr…

jQuery(„p“).after(„<hr />“);

…a tento kód vloží na konec každého odstavce span s nápisem „paragraph ends here“:

jQuery(„p“).append( “ <span>paragraph ends here</span>“ );

I v tomto směru umí jQuery mnohem více, než jsem schopen na omezené ploše srozumitelně popsat, takže máte-li zájem, přesvědčte se sami na stránce DOM/Manipulation.

Práce s událostmi

Práce s událostmi je v JavaScriptu přinejmenším stejně důležitá jako práce s elementy DOMu. Tady už jQuery tolik neexceluje, ale pořád je to velmi jednoduché a srozumitelné. Obsluhu události lze navázat klasicky metodou bind…

var callback = function () { alert( jQuery(this).text() ); };
jQuery(„p“).bind(„click“, callback);

…nebo přímo metodou specializovanou na určitý typ události:

jQuery(„p“).click(callback);

Velmi důležitá je metoda ready, která obsluhuje událost domready. Metoda ready se spustí, jakmile prohlížeč sestaví DOM. Tato událost nastane ještě dříve, než událost load, protože load se vyvolá až po načtení obrázků, zatímco domready hned, jakmile se načte kód stránky. Syntaxe vypadá takto…

var domReadyCallback = function () { … };
jQuery(document).ready( domReadyCallback );

…ale je možné ji i zjednodušit na:

jQuery( domReadyCallback );

Výhody jQuery

JavaScriptový framework jQuery výrazně usnadňuje práci s DOMem. Mezi jeho mnohé výhody patří snadné použití, zajímavé funkce, kvalitně zpracovaná dokumentace včetně tutorialů a v neposlední řadě i „ohleduplnost“ k okolnímu prostředí – na rozdíl od agresivnějších frameworků, jakými jsou Prototype nebo mooTools, se drží striktně ve svém vlastním jmenném prostoru a nemodifikuje nic, co mu nepatří.

Nevýhody jQuery

V minulosti měl jQuery určité problémy s výkonností, ale autoři tvrdí, že ve verzi 1.1.2 toto už neplatí. Jinak jsem na žádné velké nevýhody nenarazil. Někdo by mohl za nevýhodu považovat fakt, že framework používá alias $ = jQuery a tak koliduje s Prototypem, nicméně tento alias není nutné používat, nehledě na to, že samotné použití Prototypu je poněkud diskutabilní praktika. Podle mého názoru také jQuery poměrně nešikovně pracuje s ovladači událostí a s callbacky všeobecně, ale pořád ještě to zvládá lépe, než standardní JavaScript.

Souhrn

Framework jQuery je silný a elegantní nástroj pro práci s DOMem. Je plně dostačující pro malé a středně velké projekty, v opravdu velkých aplikacích poněkud ztrácí dech, ale co mu chybí na flexibilitě, to dohání jednoduchostí a přehledností.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.