jQuery – selektory 2. díl

Obsahové filtry

Obsahové filtry jsou dalším typem jQuery selektorů, pomocí kterých je možné vybírat elementy na základě jejich obsahu. Nabízejí tedy možnost určit např. textový řetězec, který musí daný element obsahovat, určit které další elementy bude daný element obsahovat a další.

$("div:contains('text')").css({
'border':'1px solid blue'
});

Takto vybereme div element, který bude obsahovat textový řetězec „text“ a orámujeme jej modrou barvou (ukázka).

$("td:empty").css({
'background-color':'red'
});

Takto vybereme buňku tabulky, která je prázdná (absolutně prázdná) a nastavíme jí barvu pozadí na  červenou (ukázka).

Jak ukazují předchozí příklady, je možné elementy vybírat na základě daného textového obsahu. Je však také možné vybírat elementy na základě určení atributu, který daný element obsahuje. Jak jsem uváděl v předchozím díle v části filtry potomků, bude tedy obsahovat některý element jako svého potomka.

$("p:has(span)").css({
'font-style':'italic'
});

Takto vybereme odstavec, který obsahuje span elementy a jeho písmo změníme na kurzívu (ukázka). Takto například funguje na mém blogu určení odkazů, které obsahují obrázek a přidělení možnosti obrázek zobrazit přes stránky pomocí pluginu Fancybox.

$("td:parent").css({
'background-color':'blue'
});

Tento selektor je opačným k selektoru :empty. Opět, jak jsem ukazoval v předchozím díle, každý element, který obsahuje např. text nebo elementy je tzv. rodič (parent). Tudíž takto vybereme buňky tabulky, které nejsou prázdné a jejich barvu pozadí změníme na modrou (ukázka).

Obsahové filtry nabízejí opravdu silné nástroje, jak vybírat elementy podle jejich obsahu. Pokud by vás možnosti těchto selektorů zaujali více, doporučuji prostudovat si blíže jQuery dokumentaci.

Formulářové selektory

Často se na webových stránkách nacházejí formuláře (například pro odesílání emailů, registraci, apod). jQuery pro ně má samostatné selektory, i když by bylo samozřejmě možné použití dříve zmíněných selektorů. Tyto selektory se nazývají vždy podle typu daného formulářového prvku.

$(":button").css({
'border':'1px solid blue'
});

Takto vybereme všechny tlačítka (formulářový prvek <input type="button">) a orámujeme je modrou barvou. (ukázka). Alternativou by bylo použití selektoru podle atributu $('input[type=button]'). To také funguje.

Formulářové elementy je také možné vybírat podle jejich aktuální hodnoty nebo nastavení. Například pokud je políčko zaškrtnuté, pokud je možnost vybrána nebo je element deaktivován (disabled).

$("input:disabled").css({
'background-color':'red'
});

Takto vybereme ty elementy, které jsou deaktivovány (mají nastavený atribut disabled) a nastavíme jim barvu pozadí na červenou (ukázka). Opět snazší způsob než tyto elementy vybírat podle atributu, jako v předchozím případě.

Pokud vás možnosti formulářových selektorů zaujaly, doporučuji prostudova jQuery dokumentaci.

Selektory podle postavení (hierarchie)

V předchozím díle jsem ukázal možnosti filtrů potomků a přiložil jsem obrázek vzájemných vztahů mezi jednotlivými prvky. Dovolím si jej v této souvislosti opět přiložit.

Protože CSS selektor pro filtry potomků nemusejí fungovat v některých verzích podporovaných prohlížečů, např. Internet Explorer 6, jQuery má vlastní filtry pro určení postavení (hirearchie) jednotlivých prvků, které fungují ve všech podporovaných prohlížečích.

$("p > span")).css({
'border':'1px solid blue'
});

Tento selektor určuje postavení jednotlivých prvků, v našem případě říká, že odstavec p je více než span element, tedy že odstavec p je rodič (parent) a span je potomek (child). Takto bychom vybrali všechny span elementy, které jsou obsažený v odstavci a orámovali je modrou barvou (ukázka).

$("div p span").css({
'border':'1px solid blue'
});

Tento způsob určuje hierarchii mezi jednotlivými prvky, tedy kdo je rodič (parent), kdo je potomek (child), kdo je další potomek (grand-child; na obrázku označen jako potomek), atd a jak z jeho významu vyplývá, nazývá se selektor pořadí. Vybíráme tedy podle předchůdců další potomky. V našem případě bychom vybrali span elementy obsažené v odstavci p, který je obsažen v div elementu. Tyto span elementy bychom orámovali modrou barvou (ukázka).

$("label + input").css({
'border':'1px solid blue'
});

Tento způsob přesně definuje, pro vybíraný element, který element byl před ním. Nejde tedy tak přesně o vybírání předchůdce, ale spíše jako o prvek, který byl na stránce v přímém pořadí jako předchozí. Takto bychom vybrali formulářový prvek input, před kterým byl popisek label (ukázka).

$("#element ~ div").css({
'border':'1px solid green'
});

Tento způsob umožňuje vybírat následující prvky podle předchozího prvku, tedy v našem případě vybereme všechny div elementy, kterým předcházel element s id #element, např <div id="element">. Možná se zdá, že to řeší přesně tu samou funkci jako předcházející příklad, tedy $("div + span"). Pravda je, že to vybere všechny prvky v sourozeneckém poměru (siblings), tedy prvky na stejné úrovni, které mají společného předchůdce (ukázka).

Pokud vás selektory podle postavení (hierarchie) zaujaly, doporučuji prostudovat jQuery dokumentaci.

Selektory podle viditelnosti

Díky CSS můžeme prvky učinit ne-viditelné pro návštěvníky stránek. Pokud bude potřeba, jQuery nabízí selektory pro práci s viditelnými, resp. s elementy ne-viditelnými. Může se tak jednat například o tyto elementy:

• Mají nastavenou vlastnost display = none
• Jejich předchůdce je neviditelný, tudíž i vnořené elementy se nezobrazují
• Input type = hidden
• Elementy s nastavenými atributy width a height na 0

Všechny tyto zmíněné prvky bude brát jQuery jako neviditelné, ostatní elementy jsou viditelné. Mohou však být i elementy, které nejsou na stránce vidět, ale které jsou považovány za viditelné, protože i přes svoje nastavení pro zneviditelnění zabírají na stránce určitý viditelný prostor.

• element s visibility = hidden
• opacity = 0

$(":visible").css({
'border':'1px solid blue'
});

Takto vybereme všechny viditelné prvky a orámujeme je modrou barvou (ukázka).

$(":hidden").show().css({
'border':'1px solid red'
});

Takto vybereme všechny neviditelné prvky, zviditelníme je a orámujeme je červenou barvou (ukázka).

Pokud vás selektory podle viditelnosti zaujaly, doporučuji prostudovat jQuery dokumentaci.

Slovo závěrem

V této dvoudílné sérii jsem chtěl vyzdvihnout především možnosti jQuery selektorů a jejich používání. Někdy s pochopením daného selektoru bývají potíže, či se využívá spíše delší zápis než možnost dané kategorie (viz. příklad u formulářových selektorů).

Doufám, že pro vás tento dvou dílný seriál byl přínosem a pokud používáte jQuery, snad vám připomněl možnosti selektorů, které tento Framework nabízí. Pokud žádný JavaScriptový Framework nepoužíváte, ale měli by jste o něj zájem, snad jsem dostatečně ukázal základní možnosti vybírání HTML elementů, které jsou u jQuery dostupné a v čem tkví jeho síla.