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...

: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.