jQuery návod – (4) Selektory

Vítejte v čtvrtém díle našeho seriálu o jQuery. V předchozích článcích jsme se seznámili s úvodem do jQuery, jeho základní instalací a napsáním prvního kódu. Dnes se ponoříme do jednoho z nejdůležitějších aspektů jQuery – selektorů.

1. Co je to selektor?

V jQuery používáme selektory k vybírání jednoho nebo více HTML prvků. Jedná se o stejný koncept, jaký používáme v CSS k určení, na jaký prvek nebo prvky se má stylování vztahovat.

2. Základní selektory

Prvek: Vybírá všechny prvky s daným názvem.

$("p") // vybere všechny odstavce

$("p") // vybere všechny odstavce

ID: Vybírá jeden konkrétní prvek s daným ID.

$("#mojeID") // vybere prvek s ID "mojeID"

$("#mojeID") // vybere prvek s ID "mojeID"

Třída: Vybírá všechny prvky s danou třídou.

$(".mojeTrida") // vybere všechny prvky s třídou "mojeTrida"

$(".mojeTrida") // vybere všechny prvky s třídou "mojeTrida"

3. Hierarchické selektory

Potomci: Vybírá všechny potomky daného prvku.

$("div p") // vybere všechny odstavce uvnitř <div>

$("div p") // vybere všechny odstavce uvnitř <div>

Přímí potomci: Vybírá pouze přímé potomky daného prvku.

$("ul > li") // vybere všechny <li>, které jsou přímými potomky <ul>

$("ul > li") // vybere všechny <li>, které jsou přímými potomky <ul>

4. Filtrační selektory

První potomek: Vybírá první potomek daného prvku.

$("li:first-child") // vybere první <li> prvek v seznamu

$("li:first-child") // vybere první <li> prvek v seznamu

Poslední potomek: Vybírá poslední potomek daného prvku.

$("li:last-child") // vybere poslední <li> prvek v seznamu

$("li:last-child") // vybere poslední <li> prvek v seznamu

Specifický potomek: Vybírá potomek na konkrétním místě.

$("li:nth-child(3)") // vybere třetí <li> prvek v seznamu

$("li:nth-child(3)") // vybere třetí <li> prvek v seznamu

5. Praktická ukázka

Máme následující HTML kód:

<div>
  <p class="uvod">Toto je úvodní odstavec.</p>
  <p>Toto je druhý odstavec.</p>
</div>
<p class="zaver">Toto je závěrečný odstavec mimo div.</p>

<div>

  <p class="uvod">Toto je úvodní odstavec.</p>

  <p>Toto je druhý odstavec.</p>

</div>

<p class="zaver">Toto je závěrečný odstavec mimo div.</p>

Chceme schovat všechny odstavce uvnitř divu a zobrazit pouze závěrečný odstavec:

$("div p").hide(); // schová odstavce uvnitř divu
$(".zaver").show(); // zobrazí závěrečný odstavec

$("div p").hide(); // schová odstavce uvnitř divu

$(".zaver").show(); // zobrazí závěrečný odstavec

Závěr

Selektory v jQuery jsou silným nástrojem, který umožňuje snadnou manipulaci s prvky na webové stránce. Díky nim můžeme efektivně pracovat s konkrétními prvky, skrývat je, zobrazovat, měnit jejich obsah a mnoho dalšího.

V dalším díle seriálu se podíváme na efekty, které můžeme v jQuery dosáhnout. Děkuji za čtení a těším se na setkání v dalším díle!