(4) Selektory
Výběr prvků
Výběr prvků je v jQuery velmi jednoduchý. Můžeme vybrat libovolný prvkek pomocí určité vlastnosti (id, name), nebo podle charakteristické vlastnosti (sudé/liché řádky).
// HTML část <div id="text">Text</div> // jQuery část $("#text");
Křížek (#) značí, že vybíráme podle id vlastnosti prvku. Tato vlastnost je jedinečná, nemuže být stejná u více prvků. Teď jsme prvek vybrali, ale nemůžeme si ověřit, jestli kód funguje. Naučíme se tedy jednoduchou funkci na schování/zobrazení textu. Funkce se jmenuje toggle(). Podle potřeby text schová nebo zobrazí. Číslo v závorce udává dobu mizení/zobrazování v milisekundách.
// HTML část <div id="text">Text</div> // jQuery část $("#text").toggle(2000); $("#text").toggle(2000);
Ukázku najdete zde
Dále lze vybírat prvek/prvky pomocí class (třídy). Ta už není, na rozdíl od id, jedinečná a stejnou třídu muže mít (a obvykle má) více prvku.
// HTML část <span class="cervena"> text 1</span> <br> <span class="modra"> text 2</span> <br> <span class="cervena"> text 3</span> <br> // CSS část .cervena { color:red; } .modra { color:blue; } // jQuery část $(".cervena").toggle(2000); $(".cervena").toggle(2000); $(".modra").toggle(2000);
Ukázku najdete zde
Také můžeme vybrat všechny prvky určitého typu.
// HTML část <a>Text A</a> <p>Text P</p> <span>Text SPAN</span> // jQuery část $("p").toggle(2000); $("span").toggle(2000); $("p").toggle(2000); $("a").toggle(2000);
Ukázku najdete zde
Vybírání prvku můžeme kombinovat.
// HTML část <a>Text A</a> <span id="text">Text ID text</span> <p class="blue"></p> // CSS část .blue { color:blue; } //jQuery část $("#text, .blue").toggle(2000); // vybere id text a třídu blue $("#text, a").toggle(2000);
Ukázku najdete zde
Taky můžeme vybrat konkrétní část prvku, např. sudé řádky.
// HTML část <div id="text"> <span id="span1">span 1</span> <span id="span2">span 2</span> <p id="p1">p 1</p> <span id="span3">span 3</span> </div> <span id="span4">span 4</span> <p id="p2">p 2</p> // jQuery část $("#text span").toggle(2000); // vybere všechny prvky typu span $("#text span:first").toggle(2000); // vybere první span, který se nachází v #text $("#text span:last").toggle(2000); // vybere poslední span, který se nachází v #text $("#text span:odd").toggle(2000); // vybere sudé spany, které se nachází v #text
Filtrovaný výběr
Jquery nabízí možnost filtrovat vybírané elementy podle jejich určité vlastnosti. Velmi časté je vybírání podle indexu prvku, tedy jeho pořadí. V jQuery se většinoupočítá od nuly!
<span>text 0</span> <span>text 1</span> <span>text 2</span> <span>text 3</span> <span>text 4</span> <span>text 5</span> <span>text 6</span>
Příkladem vybírání podle indexu jsou např. liché(:odd) a sudé (:even) řádky. Využívá se třeba v tabulkách.
// HTML část <table> // tabulka <tr><td>Řádek 0</td></tr> <tr><td>Řádek 1</td></tr> <tr><td>Řádek 2</td></tr> <tr><td>Řádek 3</td></tr> <tr><td>Řádek 4</td></tr> <tr><td>Řádek 5</td></tr> <tr><td>Řádek 6</td></tr> </table> // jQuery část $("tr:even").css("background-color", "red"); $("tr:odd").css("background-color", "black"); // tr je řádek v tabulce
Další jsou :eq(), :lt() a :gt(). :eq() vybere prvek (podle indexu), který předáme jako parametr. Opět připomínám, že index se počítá od nuly, takže
$("tr:eq(2)");
vybere třetí prvek! Další selektor :lt() vybere prvky před indexem včetně.
$("tr:lt(2)"); // vybere prvky s indexem menším nebo rovno 2, tj. 0, 1 a 2
:gt() vybere všechny prvky za indexem, ale tentokrát už bez indexu.
$("tr:gt(2)"); // vybere všechny prvky s indexem větší než 2, takže 3, 4, 5...// vybere všechny prvky s indexem větší než 2, takže 3, 4, 5...
:lt() i :gt() mají stejnou syntaxi :eq(). Dále ještě uvedu selektor :animated, který vybere všechny právě probíhající animace a ještě uvedu first a last, se kterými jsme už pracovali.
$("div:animated").toggleClass("zelena"); // prvkům, u kterých probíhá animace, se přidá třída zelena // využívá se hlavně v kombinaci s událostmi
Další je selektor :header, který vybere všechny nadpisy, tedy prvky h1, h2 až h6.
$(":header").css("text-decoration", "underline"); // podtrhne všechny nadpisy
Všechny selektory můžeme kombinovat s :not(), který zneguje vybrané prvky. Selektor, se kterým :not() používáme, předáváme jako parametr.
$("input:not(:checked)"); // vybere všechny inputy, které nejsou zaškrtnuty
Pokročilé filtrování - filter()
Vybrané prvky můžeme filtrovat funkcí filter().
$("span").filter(function() { // vyhodnocení někajé podmínky, třeba podle nějaké // hodnoty zadané uživatelem if (nejaka_hodnota == true) // když je zadaná hodnota pravda { return true; // vše je v pořádku, // prvek se může vybrat } else // ale když ne... { return false; // prvek nevybereme } });
Vybrání úplně všech prvků
Také můžeme vybrat úplně všechny prvky, dokonce bez toho, abychom všechny vypisovali. JQuery to zajišťuje hvězdičkou (*).
$(*); // vybere úplně všechny prvky
Vybírání podle obsahu
Elementy můžeme vybírat i podle jejich obsahu. Nejdříve představím funkci:contains(), která vybere všechny prvky, které obsahují nebo neobsahují určitý text.
$("div:contains('Text, který má vybraný prvek obsahovat')"); // vybere všechny divy, které obsahují text předávaný jako parametr $("div:not(:contains('Text, který nemá vybraný prvek obsahovat'))"); // tento kód vybere všechny prvky, které neobsahují text v závorce // s vybranými prvky můžeme samozřejmě provést nějakou akci, $("div:contains('Text, který má vybraný prvek obsahovat')").css("text-decoration", "underline"); // třeba podtrhnout
Další selektor je :empty (česky prázdný). Vybere všechny prvky, které nemají potomky ani textový obsah. Vybírání potomků funguje podle DOM modelu. Jak takový model třeba může vypadat, vydíte na tomto obrázku.
// HTML část <div> // rodič prvků span, které obsahuje <span>Span 0</span> // potomek divu, sourozenec ostatních spanů <span>Span 1</span> // potomek divu, sourozenec ostatních spanů <span>Span 2</span> // potomek divu, sourozenec ostatních spanů <span>Span 3</span> // potomek divu, sourozenec ostatních spanů <span>Span 4</span> // potomek divu, sourozenec ostatních spanů </div> // jQuery část $(":empty").text("Nemělo textový obsah ani žádné potomky!") // vyfiltrujeme prvky, které nemají potomky ani textový obsah
Opakem :empty je selektor :parent, které vybere všechny prvky, které mají rodiče.
// HTML část <div> // rodič prvků span, které obsahuje <span>Span 0</span> // potomek divu, sourozenec ostatních spanů <span>Span 1</span> // potomek divu, sourozenec ostatních spanů <span>Span 2</span> // potomek divu, sourozenec ostatních spanů <span>Span 3</span> // potomek divu, sourozenec ostatních spanů <span>Span 4</span> // potomek divu, sourozenec ostatních spanů </div> // jQuery část $(":parent"); // ve výběru zbydou všechny spany, ale ne div, protože nemá rodiče // // v reálu by se vybral, protože by měl rodiče body
Dále uvedu funkci :has(), která funguje následovně.
$("div:has(p)"); // vybere všechny divy, které obsahují (mají potomka) p
Tuto funkci můžeme taky znegovat.
$("div:not(:has(p))");
Takže vybere všechny prvky, které nemají potomka p. Na vybírání potomků je vyčleněno několik dalších funkcí. :first-child vybere prvního potomka všech vybraných elementů, :last-child posledního, :nth-child() vybere potomka podle indexu, který předáme jako parametr. Index se pro změnu nepočítá od nuly, ale odjedničky! Místo čísla můžeme použít třeba even nebo třeba odd. Selektor :only-child vybere prvky, které nemají sourozence a mají rodiče, takže v podstatě jedináčky.
$("div:first-child"); // vybere prvního potomka všech divů $("div:last"); // vybere posledního potomka všech divů $("div:nth-child(5)"); // vybere pátého potomka všech divů
Vybírání podle viditelnosti
Na vybírání podle viditelnosti máme logicky dva selektory. První je :visible, který vybere všechny viditelné prvky, druhý je :hidden, který vybere všechny schované prvky.
$("div:visible"); // vybere všechny viditelné divy $(":hidden"); // vybere všechny schované prvky
Vybírání formulářových prvků
Formulářové prvky jsou takové, které se používají ve formulářích, např. tlačítko (button), input, checkbox nebo radiobutton. Začneme selektorem :button, který vybere všechna tlačítka. Další je :checkbox, který vybere všechna zaškrtávací tlačítka.
$(":button"); // vybere všechna tlačítka $(":checkbox"); // vybere všechny checkboxy - zaškrtávací tlačítka
Další formulářové selektory uvedu v krátkém přehledu.
- :file
- :image - vybere všechny obrázky
- :input
- :password
- :radio
- :reset
- :submit
- :text
$("input:text"); // vybere všechny prvky, které mají vlastnost type // nastavenou na text, tj. třbea <input type="text"> $(":submit") // vybere všechny prvky, které odesílají data na server // třeba <input type="submit">
To byl seznam všech prvků, teď uvedu selektory na vybrání prvků podle jejich vlastnosí.
- :checked - všechny zaškrtnuté prvky
- :enabled - všechny prvky, do kterých se může zapisovat
- :disabled - všechny prvky, které jsou zablokované
- :selected - všechny prvky, které uživatel vybral
$("input:checked"); // vybere všechny zaškrtnuté inputy - checkboxy
Výběr podle atributů - vlastností
Atributy jsou např. name, id, class, href, src. Jqery nabízí několik selektorů, díky kterým můžeme vybírat třeba prvky obsahující nějaký text ve atributu name. Jako první uvedu selektor [ ], s jehož pomocí můžeme vybrat prvky, který mají určitou vlastnost s libovolnou hodnotou.
$("div[id]"); // vybere všechny divy, které mají libovolné id
Další je [ = ], který umožňuje vybrat prvky se stejnou hodnotou u určité vlastnosti.
$("span[class='tucne']"); // vybere všechny spany, které mají třídu tucne
Opakem tohoto selektoru je [ != ], který vybere všechny prvky, které nemají danou hodnotu v atributu. Další uvedu v přehledu.
- [ |= ] - když je zadaná hodnota úplně stejná nebo oddělená alespoň z jedné strany pomlčkou a z druhé mezerou nebo pomlčkou
- [ ~= ] - když obsahuje hodnotu oddělenou mezerami
- [ $= ] - když je hodnota na konci atributu
- [ ^= ] - když je hodnota na začátku
// CSS část .blue { color:blue; } .gold { color:gold } .green { color:green } // jQuery část $("span[class ^= g]"); // vybere spany se třídami gold nebo green, // ale ne prvky, které mají třídu blue
Navíc všechny tyto selektory můžeme kombinovat tímto způsobem
$("div[id][class='zluta']"); // vybere všechny divy, které mají id a třídu zluta
Traversing
Představte si, že vyberete nějáký prvkek a budete chtít vybrat třeba prvek vedle něj. I pro takovéto akce jQuery poskytuje řadu funkcí. Nejdříve uvedu funkci next(), která vybere následující prvek.
$("div").next(); // vybere nejbližší následující prvek po všech divech
Tato funkce může být použita i se selektorem jako parametr.
$("div").next("span"); // vybere nejbližší následující span po každém divu
Opakem je funkce prev(), která vybere předchzející prvek. Používá se stejně jako funkce next() a také můžeme použít selektor jako parametr.
$("div").prev("span"); // vybere nejbližší span před každým divem
Podobná funkce jako next() je funkce nextUntil(), která vybere všechny prvky následující po vybraném prvku, takže původně vybraný element už není vybraný.
// HTML část <span>-1</span> <div id="text"></div> <span>0</span> <span>1</span> <div>2</div> <span>3</span> // jQuery část $("#text").nextUntil("span"); // vybere všechny spany následující // za #text a původně vybraný #text // už vybraný není // vybrané prvky: span 0, span 1, span 3
I takto funkce má svůj opak, funkci prevAll(). Vybrat všechny prvky následující po vybraném prvku můžeme pomocí funkce nextAll(), kterou také můžeme použít v kombinaci se selektorem.
$("#text").nextAll("span"); // Vybere všechny spany následující // po divu s id "text"
Opakem této funkce je pochopitelně funkce prevAll(), co dělá a jak se používá je doufám jasné. Další funkce, o které se zmíním je children(), která vybere všchny děti (podle objektového modelu DOM), volitelně filtrované podle selektorů.
// HTML část <div id="odstavec"> <span id="span1"> <a id="text"></a> </span> <span id="span2"> <a id="text2"></a> </span> </span> </div> // jQuery část $("#odstavec").children(); // vybere #span1 a #span2, // ale ne #text ani #text2, protože // to není přímo dítě $("#span1").children(); // vybere #text1 $("span").children(); // vybere #text1 i #text2
I tato funkce má svůj opak, a to parent(). Podobná je funkce parentsUntil(), která vybere rodiče, původně vybraný element však už není vybrán. Vybrat můžeme i sourozence (opět podle DOM) funkcí siblings().
// HTML část <div id="obsah"> <span id="text">0</span> <span>1</span> <span>2</span> </div> <div id="hlavicka"> <span>3</span> </div> // jQuery část $("#text").siblings(); // vybere sourozence #text a #text nebude vybraný // vybrané prvky: span 1, span 2
Existují i funkce podobné selektorům, jako jsou třeba funkce last(), first(), not(). Jsou stejné jako selektory se stejným názvem (:last, :first, :not), ale používají se jako funkce.
$("div :last"); // použití selektoru $("div").last(); // použití funkce // oba kódy udělají to stejné
Další je funkce .contents(), která vybere potomky včetně textu.
// HTML část <div id="rodic"> text... <span>0</span> <div>1</div> <span>2</span> ...dalsi text... </div> // jQuery část var text = $("#rodic").contents().text(); // v proměnné text bude uložena hodnota: // text...012...dalsi text...
Další z funkcí je find(), která najde a vybere prvky, které jsou potomky aktuálně vybraného prvku. Obvykle se používá se selektorem (který předávámne jako parametr). Funguje velmi podobně jako funkce children(). Funkce, která porovnává selektor s aktuálně vybraným prvkem se jmenuje is(). V případě, že se shodují, vrací true (pravda), jinak vrací false (lež).
// HTML část <ul> <li>list <strong>prvek 1</strong></li> <li><span>prvek item 2</span></li> <li>prvek 3</li> </ul> // jQuery část $('ul').click(function(event) { // při kliknutí na seznam (i prvky v něm) if ($(event.target).is('li') ) { // když to bude "li" $(event.target).css('background-color', 'red'); // tak mu nastaví barvu pozadí na červenou } }); // V případě, že klikneme na "prvek 1", nic se nestane, // protože event.target bude strong. Podobně to dopadne // u druhého prvku, kde bude event.target span. // Pouze u třetího prvku bude event.target li, // takže se změní barva pozadí.
Další možnosti výběru prvků
Prvky můžeme vybírat pomocí některých znaků, jak uvidíte na ukázce. První příklad už znáte, jedná se o čárku (,). Vybere všechny prvky, které uvedeme a oddělíme čárkou.
$("#obsah, p, .cervena") // vybereme #obsah, p a .cervena
Další znak je >, který má i ekvivalentní variantu /. Vybere všechny děti daného prvku, funguje tedy stejně jako funkce children.
$("ul > li"); // vybere všechny položky v seznamu, // (resp. všechny potomky ul, které mají název li) // ekvivalentní (stejné) jako ul / li
Další znak je ~ (tilda), kterým vybereme předchozího sourozence.
// HTML část <span id="nula">nula</span> <span id="jedna>jedna</span> <span id="dva">dva</span>
Vybírat také můžeme podle umístění v HTML dokumentu, třeba takto:
$("//div//p"); // div, který má potomka (nemusí to být přímo dítě) $("//div/../p"); // vybere rodiče elementu
Všechny možnosti můžeme libovolně kombinovat.