rss

jQuery pro začátečníky: výběr prvků

29. 9. 2008

Výběr prvků v HTML stránce je v jQuery opravdu něco úžasného (z mého laického pohledu minimálně). Odborně se to nazývá selektory. Jsou to způsoby, jakým vyberete na stránce třeba támhle odkaz, tady odstavec apod. Pak s takovým vybraným prvkem můžete něco udělat, my ho v našem článku necháme pomalu zmizet, ale příště si ukážeme, že toho s prvky můžeme dělat mnohem více.

Můžu malou odbočku? - Adamova zkoušečka jQuery

Ještě než se pustím do článku, předvedu vám kůl nástroj od Adama Hořčici. V jQuery zkoušečce si můžete zkoušet a dělat pokusy s jQuery. Do prvního políčka napíšete část HTML, se kterou budete pokus provádět a do spodního okénka napíšete javascriptový kód. Kliknete na Spustit a v posledním okénku se vám zobrazí výsledek. Důrazně doporučuji zkoušet všechny příklady, které uvedu a pak je různě obměňovat a koukat, co to provede. Abyste to měli jednodušší, u několika příkladů na vyzkoušení příkladu přímo odkazuji. Pohodlné ne?

Ale to jsme odbočili. Ano, ten výběr prvků. Takže, určitě jste už mnohokrát psali takové to překotné

document.getElementById('idelementu').bla bla bla

Huh, strašnej zápis co. Pamatuju si, že jsem si to pak zjednodušoval funkcí, která vypadala třeba takhle:

function el(element)
{
   return document.getElementById(element);
}

To už bylo jednodušší, ale kam se to hrabe na možnosti, co nám naservírovalo jQuery hned ve chvíli, kdy jsme si ho do stránky nalinkovali.

Takže, nejčastěji chceme vybrat prvek podle konkrétního id, myslím tím třeba takový prvek:

<p id="muj_odstavec">Text v odstavci</p>

Ještě si dáme za úkol něco s tím prvkem udělat, aby naše příklady dávaly smysl. Co třeba nechat ten prvek pomalu zmizet. Na to slouží metoda hide(), kterou připojíme za náš selektor, a to tečkou. Ještě do závorek metody přidáme hodnotu 1000. To znamená, že proces mizení bude trvat jednu vteřinu (1000 milisekund).
Čili ukažme si to naostro, jak to v bude vypadat:

$("#muj_odstavec").hide(1000);

Příklad si hned vyzkoušejte v Adamově zkoušečce.

Na tomto místě bych ještě rád upozornil na jednu věc. Hodnota parametru ID u prvků v HTML stránce může podle pravidel obsahovat i tečky a hranaté závorky. Já jednou potřeboval vybrat takový prvek, který měl v ID tečku, a zjistil jsem, že se to dělá takto: $("#muj\.odstavec") funguje tedy pro výběr prvku s id = "muj.odstavec". Hranaté závorky nebo tečky tedy eskapujte dvěma zpětnými lomítky.

Tak pokračujeme. Právě jsme nechali zmizet odstavec, pěkné ne? Ha, určitě vás zajímá, jestli taky existuje metoda show() :) No jasně že jo, existuje toho mnohem více, ale o tom příště. Nyní se vraťme k vybírání prvků, protože ty se dají vybírat opravdu MNOHA způsoby. Pokud nebude váš projekt moc složitý, vystačíte si jenom s několika. Občas ale budete potřebovat nějakou specialitku a ani zde vám jQuery nepřestane být dobrým přítelem po ruce.

Takže zavzpomínejte, co jste v minulosti ještě potřebovali vybrat? Já například všechny prvky, které měly nějakou třídu, to nebylo zrovna jednoduché, protože sám javascript myslím nemá něco jako getElementByClassName. Musela by se na to napsat hnusná funkce :) Ale jQuery zůstává elegantní a nezatěžuje vaši mysl zbytečným kódem:

$(".moje_odstavce").hide(1000);

Příklad si můžete vyzkoušet

Právě jsme nechali zmizet všechny odstavce, které měly třídu moje_odstavce. Abychom dali dohromady asi nejpoužívanější trojici selektorů, přidám ještě prosté vybrání prvku podle prvku :)

$("p").hide(1000);

A všechny odstavce jsou skryty, ať měly třídu jakou chtěly.

Následují další způsoby výběru, které budete možná jednou potřebovat, a další jsou v nápovědě jQuery, a to docela přehledně.

Chci vybrat více různých prvků, oddělím je tedy čárkami:

$("p,a,div,#muj_odstavec").hide(1000);

Chci vybrat prvek, který je ale v nějakém jiném určitém prvku. Tohle mi například skryje všechny spany v mém odstavci:

$("#muj_odstavec span").hide(1000);

Vyzkoušejte si

Chci vybrat první prvek v jiném prvku. Například první řádek v tabulce nebo první span v mém odstavci. Ke spanu dáme dvojtečku a za ni napíšeme, že nás zajímá pouze první span. Samozřejmě lze vybrat i poslední nebo třeba sudý.


$("#muj_odstavec span:first").hide(1000);

Tohle je pěkné: Chcete vědět hodnotu vybrané položky v <select>? Velmi jednoduché. Ale v tomto příkládku už nepoužiji metodu hide(), protože určitě nechceme schovávat položku v <select>. My Chceme třeba do nějaké proměnné získat hodnotu takové vybrané položky. Použijeme tedy pro nás novou metodu val(), která nám hodnotu vrací:

var coJeVybrano = $("#muj_select option:selected").val();

Ještě jste doufám pořád v obraze. Musím se přiznat, že je těžké nerozpovídat se o dalších věcech, protože to všechno na sebe navazuje. Ale chci aby to bylo opravdu názorné.

Jedna taková pomůcka. Možná jste si všimli, že zápis pro vybírání prvků je stejný jako znáte z CSS (kaskádové styly). Třídu vybíráte tečkou, id mřížkou, stav určujete dvojtečkou (určitě si vzpomínáte na a:hover). Ovládáte-li tedy aspoň trochu CSS, bude pro vás psaní těchto selektorů hračka.

Dnes jste si tedy mohli udělat svůj vlastní javascript s použitím jQuery a zkoušet si schovávat jednotlivé prvky ve stránce. Příště asi ukážu, že se toho dá s prvky dělat mnohem víc, než je jenom schovávat nebo zobrazovat.

Seriál jQuery pro začátečníky


Komentáře

Langi

Super, super.

Michal Marek

Díky moc, to je přesně to, co člověk potřebuje! :-) Snad Ti vydrží motivace na další díly, smysl to rozhodně má ;-)

Filip Růžička

Mnohokrát díky za tenhle seriál, už jsem myslel že se k tomu JavaScriptu nikdy nedokopu.. Těším se na další díly.

bzuK

Ta podobnost s CSS selektorz je geniální.

David Lengyel

Návod přesně pro mě, hezky polopatě. jQuery sice používám, ale rád bych ho i ovládal. S tímhle návodem to bude, zdá se, hračka. Určitě chci pokračování jako výše uvedení :)

Nishkam

taky dekuji, uz si to davam do bookmarks :)

Filip Slováček

Přidávám se k nadšeným a web přidávám do čtečky. Takový návod tu chyběl:)

LuKo

Vždy, jen a pouze za všech okolností dvěmA

medhi

LuKo [8]: Díky, opraveno

David Grudl

Ahoj Medhi, vypadá to, že ti redakční systém požírá zpětná lomítka, viz

> Já jednou potřeboval vybrat takový prvek, který měl v ID tečku, a zjistil jsem, že se to dělá takto: q("#muj.odstavec")

Nemělo tam být $("#muj\.odstavec") ?

David Grudl

tedy… lomítka požírají i komentáře

medhi

David Grudl [10]: Davide, díky. Je to pěknej žrout a jdu mu dát za vyučenou.

medhi

David Grudl [11]: A proč už jsem sem Texy nedal sakra dřív?

David Grudl

medhi [13]: třeba kvůli eAccelerator? ;-)

Ještě tam myslím zlobí &apos; v první ukázce a v tom q("#muj\.odstavec") má být skutečné kvé?

karf

?Hodnota parametru ID u prvků v HTML stránce může podle pravidel obsahovat i tečky a hranaté závorky?

Opravdu může ID obsahovat hranaté závorky? Já bych řekl, že ani ne.

Pomgoe

Mám menší problém. Kódy ve kterých je použito jQuery mi nefungují, když je dám do externího souboru. Když je dám do tagu tak mi to normálně funguje. Ten externí soubor je nalinkován dobře, kódy bez použití jQuery fungují normálně. Nevíte čím to může být? Používám jQuery 1.4.2. Díky za odpověď.

skor

v javascriptu existuje metoda document.getE­lementsByTagNa­me()

skor

Pomgoe Pomgoe [16]: : Musíš mít externí soubor nalinkovaný za souborem vkládajícím jQuery

Racky

Ahoj.. Chtěl bych se zeptat, jak je to s funkcí hide(). Stáhl jsem si nejnovější jquery 1.4.3 a když zavolám hide(), tak mi prvek odlítne doleva a cestou zmizí. V ukázkách v tomto článku zmizení probíhalo jinak. Jak je to možné? Dík..


Archiv