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);
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);
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.
Komentáře
1.Langilangi.cz | 29. 9. 2008 | 13:12 | #
Super, super.
2.Michal Marekwww.michal-marek.cz | 29. 9. 2008 | 14:03 | #
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á 😉
3.Filip Růžičkaniceone.filipruzicka.net | 29. 9. 2008 | 15:17 | #
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.
4.bzuK| 29. 9. 2008 | 15:35 | #
Ta podobnost s CSS selektorz je geniální.
5.David Lengyelwww.vistamedia.cz | 30. 9. 2008 | 07:51 | #
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í 🙂
6.Nishkamnishkam.tady.info | 30. 9. 2008 | 09:42 | #
taky dekuji, uz si to davam do bookmarks 🙂
7.Filip Slováčekslovaczech.com/ | 30. 9. 2008 | 19:22 | #
Přidávám se k nadšeným a web přidávám do čtečky. Takový návod tu chyběl:)
8.LuKo| 1. 10. 2008 | 01:55 | #
Vždy, jen a pouze za všech okolností dvěmA
9.medhi| 1. 10. 2008 | 08:38 | #
LuKo [8]: Díky, opraveno
10.David Grudlphpfashion.com | 8. 10. 2008 | 13:04 | #
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“) ?
11.David Grudlphpfashion.com | 8. 10. 2008 | 13:05 | #
tedy… lomítka požírají i komentáře
12.medhi| 8. 10. 2008 | 13:57 | #
David Grudl [10]: Davide, díky. Je to pěknej žrout a jdu mu dát za vyučenou.
13.medhi| 8. 10. 2008 | 14:30 | #
David Grudl [11]: A proč už jsem sem Texy nedal sakra dřív?
14.David Grudlphpfashion.com | 9. 10. 2008 | 12:31 | #
medhi [13]: třeba kvůli eAccelerator? 😉
Ještě tam myslím zlobí ‚ v první ukázce a v tom q(„#muj.odstavec“) má být skutečné kvé?
15.karfwww.karf.cz | 6. 11. 2008 | 11:31 | #
?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.
16.Pomgoe| 22. 5. 2010 | 12:02 | #
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ěď.
17.Racky| 7. 11. 2010 | 10:43 | #
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..
18.skor| 26. 2. 2011 | 21:49 | #
Pomgoe Pomgoe [16]: : Musíš mít externí soubor nalinkovaný za souborem vkládajícím jQuery
19.skor| 26. 2. 2011 | 21:50 | #
v javascriptu existuje metoda document.getElementsByTagName()