jQuery – selektory

Co jsou to selektory?

„Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code“ říká specifikace W3C.

Selektory jsou tedy speciální argumenty (nebo vzory), které nám pomohou určit specifický element z celého stromu elementů dokumentu, v našem případě HTML. Pokud alespoň trochu znáte CSS styly, se selektory jste se již setkali.

.trida { color: #fff; }
#element { background-color: #fff; }
a[href^=ftp://] { color: #00FF00; }

Příkladem uvádím tři CSS selektory, které nám pomohou určit specifické elementy a určit pro ně zvláštní vlastnosti. Uvedený zápis .trida nastaví bílou barvu písma všem prvkům, které mají tuto třídu přidělenou. Zápis #element nastaví bílou barvu pozadí pro jeden specifický element, který má přidělený unikátní atribut id=”element” a zápis a[href^=ftp://] určí zelenou barvu písma pro všechny odkazy, kde cesta odkazu začíná zápisem ftp://.

Máte tedy již představu, co to vlastně selektory jsou?

Používáme jQuery selektory

jQuery jakožto kvalitní nástroj nabízí nejen standardní CSS selektory (verze 1 až 3), ale jejich nabídku mnohem rozšiřuje. Jak bychom vybrali například odstavec, který obsahuje určitý text nebo určitý element? Bylo by to poměrně složité i za použití čistého JavaScriptu, neboť by se musely použít regulární výrazy a to by na zápis bylo nejen složitější, ale i zdlouhavé. Proto je zde jQuery, aby nám s tímto pomohlo a to díky jednoduchým zápisům.

Připravil jsem také ukázku všech selektorů, které zde budu popisovat. V jednotlivých kapitolách je možné si zobrazit ukázku přímo pro danou kategorii, nebo si můžete celou ukázku jQuery – selektory zvlášť.

Níže uvedený seznam s příklady a popisy demonstruje zmíněnou jednoduchost syntaxe potřebné funkce. Ještě než uvedu, jak vybrat požadované elementy podle jednotlivých prvků uvádím, že všechny zde popsané selektory by měli fungovat snad od všech verzí jQuery, ale jist si tím nejsem. Pro verzi jQuery 1.3 až 1.4 určitě fungují (když tak prosím o opravu v komentářích, já jsem začal používat jQuery právě ve verzi 1.3).

Základní selektory

Základní selektory spočívají ve výběru určitých elementů nebo elementů s určitými přiřazenými atributy – třídou a id. Jde vlastně o standardní CSS zápisy a proto není potřeba využívat jQuery pro stylování, ale pro navázání určitých událostí.

$('div').css({
'border':'1px solid red'
});

Takto bychom vybrali všechny div elementy, které bychom červenou barvou jednoduše orámovali (ukázka).

$('div.trida').draggable();

Takto bychom vybrali všechny div elementy s přiřazenou třídou trida <div class=”trida”></div> a udělali bychom je, za pomocí jQuery UI, uchopitelné a přesunovatelné (ukázka).

Pro základní selektory mají podporu snad všechny prohlížeče, protože není potřeba využívat jQuery pro stylování (samozřejmě že to lze), ale spíše pro navazování událostí. Pokud se chcete o základních selektorech dozvědět více, doporučuji nahlédnout do jQuery dokumentace.

Vybíráme elementy podle atributů

Představme si, že potřebujeme vybrat elementy, které mají určitý atribut s určitou hodnotou a těm nastavit požadované vlastnosti či chování (event). Nebo vybrat právě ty, které tento atribut nemají nebo mají, ale s jinou hodnotou než s uvedenou.

$('img[src*=logo]').css({
'border':'1px solid #000'
});

Takto vybereme všechny obrázky, které mají v cestě k obrázku zapsán text logo (na jakékoliv pozici, např. <img src=”../images/logo/1.jpg” alt=”” /> nebo <img src=”logo.gif” alt=”” /> a černě je orámujeme (ukázka).

$('img[alt!=logo]').css({
'border':'1px solid red'
});

Takto vybereme zase všechny obrázky, které v atributu alt nemají zapsán text logo. Tento selektor funguje tak, že vybere ty elementy, které tam nemají napsáno přesně řetězec „logo“ (ukázka).

Někdy se můžeme dostat do situace, kdy budeme potřebovat vybrat některý element, který má definovaný určitý atribut bez specifické hodnoty.

$('p[class]').css({
'font-style':'italic'
});

Takto vybereme všechny odstavce, které mají přiřazenou jakoukoliv třídu a jejich text bude vypsán kurzívou, například <p class=”trida1”>ahoj</p> nebo <p class=”trida”>ahoj</p>. Je potřeba si dát pozor, protože pokud budeme mít například odstavec <p class=”trida1 trida2”>ahoj</p>, zde tento selektor nefunguje i přes to, že odstavec má definován atribut class (ukázka).

Jak jste si nejspíše všimli, tyto možnosti je možné provádět i pouhým CSS zápisem, pokud jde pouze o ostylování prvků. Deklarování pomocí jQuery má tu výhodu, že pokud nebude prohlížeč tyto zápisy podporovat, díky jQuery je budeme moci aplikovat a dosáhneme tak požadované funkce i na starších prohlížečích. Avšak pokud použije uživatel prohlížeč s vypnutým JavaScriptem a nepodporou pro tyto CSS zápisy, nic se neprovede. To už je ale spíše o použitelnosti webu a to zde řešit nechci.

Pokud vás možnosti selektorů podle atributů zajímají více, doporučuji prostudovat si jQuery dokumentaci či nahlédnout do specifikace W3C.

Selektory – základní filtry

Díky jQuery je možné dosáhnout ještě většího výkonu při vybírání určitých elementů díky filtrům. Z CSS známe například filtr :hover. který definuje určitý styl pro prvek, nad který najedeme myší. jQuery jde ještě dál a nabízí sadu velmi užitečných filtrů.

$('li:odd').css({
'color':'red'
});

Takto např. vybereme všechny sudé položky seznamu a jejich text bude vypsán červeně. Nemusí se tak nějak složitě počítat jejich pořadí, jQuery to udělá za nás. Samozřejmě opak je využití dalšího filtru (ukázka).

$('ul li:even').css({
'color':'blue'
});

Takto právě vybereme všechny liché položky v seznamu a jejich text bude vypsán modře (ukázka). Oba uvedené příklady se velice hodí např. v tabulkách. Kdysi mi byl položen dotaz, jak jednoduše rozlišit řádky tabulky, aby každý řádek měl jinou hodnotu. Tady je odpověď.

Pokud bychom však například chtěli odlišit řádky tabulky od určité pozice (např. chci vidět pouze první 2 řádky tabulky, ostatní mě nezajímá), lze využít následujícího filtru.

$('table tr:gt(1)').hide();

Takto bychom , jak jsem zmínil, nechali zobrazené pouze 2 řádky a ostatní bychom schovali (ukázka). Divíte se, proč je jako argument uvedeno číslo 1 a první řádek se neschová? Je to tím, že JavaScript indexuje pole prvků od 0, proto má první řádek tabulky index 0, druhý 1, atd. Na to je potřeba pamatovat.

$('p:first'().css({
'font-size':'20px'
});

$('p:last').css({
'font-size':'12px'
});

Takto bychom vyhledali první, respektivě poslední, odstavec a zvětšili, respektivě změnšili, velikost písma. To se může hodit například u blogu, kdy chceme úvodní odstavec odlišit od ostatních a poslední odstavec také (ukázka).

Základní filtry nabízí opravdu zajímavé možnosti pro práci s vlastním obsahem. Různě ho formátovat nebo na něj navazovat podle potřeby události. Pokud vás základní filtry zaujaly, doporučoval bych prostudovat blíže jQuery dokumentaci. Tyto filtry však můžeme rozšířit o další, tzv. filtry potomků (viz dále).

Filtry potomků

Zajímavým rozšířením základích filtrů je možnost práce s potomky či předchůdci (rodiči), tedy s tzv. child a parent (pokud znáte objektové programování, žádný problém). Je tedy možné, pomocí těchto filtrů, vybírat specifické elementy podle určení jejich předchodůce.

$('p span:nth-child(odd)').css({
'font-size':'20px'
});

Takto vybereme vždy sudé elementy span, které jsou umístěny v odstavci. Zde odstavec představuje předchůdce (rodiče) a elementy span potomky (child). Můžeme také vybrat element, který je v určitém elementu obsaženou pouze jednou (ukázka).

$('p span:only-child').css({
'border':'1px solid #00FF00'
});

Pokud budeme mít odstavec, například <p>vybíráme <span>potomky</span></p>, orámuje se span element černou barvou. Když bychom však měli více span elementů, tzv. sourozenců (siblings) <p><span>Ahoj</span>, <span>zde</span> se nic nestane</p>, tak žádný z nich nebude orámován (ukázka).

Jak jste si nejspíše všimli, tyto selektory se velice podobají některým ze základních filtrů. Např. bychom mohli použít filtr :gt pro výběr prvků od určité pozice místo :nt-child. Rozdíl je v tom, že jak jsem zmínil u popisu základních filtrů, JavaScript indexuje pole od 0, takže pro výběr od 2. prvku se musí napsat :gt(1), apod. Filtry potomků však indexují správně, proto pro výběr od druhého prvku stačí napsat :nt-child(2). Pokud vás tyto selektory zaujaly, doporučil bych prostudovat jQuery dokumentaci.

Pokračování v dalším článku

Selektory jsou velice silným nástrojem pro práci s HTML dokumentem a díky jQuery je to ještě snadnější a u kterého tvoří jeden z nejlepších funkčních nástrojů. Existují ještě další typy selektorů, které se pokusím popsat v dalším pokračování.

Pokud jQuery znáte a používáte, doufám, že byl pro vás tento článek přínosem, např. jako opakováním či připomenutím možností, které jQuery nabízí. Pokud se setkáváte s jQuery poprvé, můžete se s ním blíže seznámit na jQuery.com a prostudovat si jeho možnosti.