Lekce 7 - Selektory v jQuery, část druhá

V minulé lekci, Selektory v jQuery, část první, jsme měli průzkum selektorů jQuery.

V dnešním JavaScript tutoriálu si představíme pseudoselektory.

Příprava stránky

Stejně jako minule si selektory budeme ukazovat na stejném HTML dokumentu. Pro úplnost uvádím znovu jeho HTML a CSS části:

HTML

<ul id="web">
    <h2>WEB</h2>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>PHP</li>
    <li>ASP .NET</li>
    <li>JAVA</li>
</ul>
<ul id="desktop">
    <h2>DESKTOP</h2>
    <li>JAVA</li>
    <li>C# .NET</li>
    <li>VB .NET</li>
    <li>PYTHON</li>
    <li>PASCAL</li>
</ul>
<ul id="zvirata">
    <h2>ZVÍŘATA</h2>
    <li>PES</li>
    <li>KOČKA</li>
    <li>PAPOUŠEK</li>
    <li>LEV</li>
    <li>DRAK</li>
    <li>ŽELVA</li>
</ul>
<ul id="barvy">
    <h2>BARVY</h2>
    <li>RŮŽOVÁ</li>
    <li>MODRÁ</li>
    <li>ČERNÁ</li>
    <li>ZELENÁ</li>
</ul>
<ul id="nesmysly">
    <h2>NESMYSLY</h2>
    <li data-nesmysl="69">69</li>
    <li data-nesmysl="69 xoxo">69 xoxo</li>
    <li data-nesmysl="69-nth">69-nth</li>
    <li data-nesmysl="nu69kl tik">nu69kl tik</li>
    <li data-nesmysl="hute 69p ui">hute 69p ui</li>
    <li data-nesmysl="qwe 69rty" id="qwerty">qwe 69rty</li>
    <li data-nesmysl="69 BIT">69 BIT</li>
    <li data-nesmysl="party 69">party 69</li>
</ul>

CSS

body {
    background: #e5e5e5;
    color: #3d3d3d;
    margin: 0px;
    font-family: 'Open Sans';
}

* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style-type: none;
    border: 0px;
}

ul {
    float: left;
    padding: 10px 20px;
    text-align: center;
}

ul li {
    background : #CACACA;
    color      : #444;
    width      : 80px;
    border     : 2px solid #A6A6A6;
    margin     : 10px 0;
    padding    : 5px 10px;
    font-family: 'Open Sans';
    font-size  : 18px;
    text-align: left;
}

.green {
    background : #61E452;
    color      : #ededed;
    border     : 2px solid #1A7010;
}

.blue {
    background : #0080C0;
    color      : #ededed;
    border     : 2px solid #004080;
}

.yellow {
    background : #F4FF2F;
    color      : #444;
    border     : 2px solid #D0CB04;
}

.red {
    background : #ed1c24;
    color      : #ededed;
    border     : 2px solid #7f0011;
}

Stránka vypadá takto:

Pseudoselektory

Pseudo-selektory se rozumí takové selektory, které vybírají elementy podle nějaké jejich vlastnosti.

$(":first-child")

Selektor :first-child nám vybere, jak již jistě tušíte z názvu, prvního potomka nebo potomky z nějakého rodičovského elementu nebo elementů.

Příklad:

$("ul li:first-child").addClass("blue");

Výsledek:

$(":first-of-type")

Pomocí :first-of-type vybereme první element daného typu v rodičovském elementu. Typem myslíme například odstavec - p.

Příklad:

$("ul li:first-of-type").addClass("blue");

Výsledek:

Jaký je tedy rozdíl mezi :first-child a :first-of-type?

Když si zkusíme na našem příkladu použít tyto selektory, zjistíme, že nám funguje jen :first-of-type. Je to tím, že v našem seznamu je první element nadpis. li:first-child tedy v seznamu není.

$(":last-child")

Je opakem :first-child, vybere nám poslední element z rodičovského elementu. Jako u všech jQuery metod platí, že lze vybrat i více elementů (např. poslední elementy z několika seznamů). U dalších metod a selektorů již tuto informaci nebudeme zmiňovat.

Příklad:

$("ul li:last-child").addClass("blue");

Výsledek:

$(":last-of-type")

Selektor :last-of-type nám vybere posledního potomka daného typu v daném rodičovském elementu.

Příklad:

$("ul li:last-of-type").addClass("blue"); // v našem případě stejný efekt jako minule

Výsledek:

$(":nth-child(n)")

Tento selektor vybere n-tý element v daném rodičovském elementu.

Příklad:

$("ul li:nth-child(3)").addClass("blue");

Výsledek:

$(":nth-of-type(n)")

A nyní vybereme zas n-tý element daného typu.

Příklad:

$("ul li:nth-of-type(3)").addClass("blue");

Výsledek:

$(":nth-last-child(n)")

Tento selektor je podobný jako :nth-child(n), avšak zde vybíráme od konce.

Příklad:

$("ul li:nth-last-child(3)").addClass("blue");

Výsledek:

$(":nth-last-of-type(n)")

Stejně jako u předchozího selektoru vybíráme od konce, nyní ovšem pouze elementy daného typu.

Příklad:

$("ul li:nth-last-of-type(3)").addClass("blue"); // v našem případě stejný efekt jako minule

Výsledek:

$(":only-child")

Selektor nám vybere všechny elementy, které jsou v daném rodičovském elementu samy.

Příklad:

$("h2:only-child").addClass("blue");

Výsledek:

$(":only-of-type")

Varianta předchozího selektoru s tím, že se v rodičovském elementu musí nacházet jediný element daného typu. V tomto případě se v rodiči mohou nacházet další elementy jiného typy.

Příklad:

$("h2:only-of-type").addClass("blue");

Výsledek:

Zařadit sem můžeme i speciální jQuery selektory :lt(), :gt(), :odd, :even, :first, :last a :eq(). O nich si ale povíme až příště.

Filtr obsahu

Na závěr dnešní lekce si představíme selektory, které slouží k filtrování obsahu nějakého rodičovského elementu.

$(":not()")

Selektor :not() zneguje libovolný selektor. Vybere tedy elementy, které jej nesplňují.

Příklad:

$("ul li:not([data-nesmysl='69'])").addClass("blue");

Výsledek:

$(":contains()")

Tento selektor nám vybere elementy, které obsahují ve vnitřním textu nějaký podřetězec (např. slovo). Dávejte si pozor na velikost písmen, selektor je na ni citlivý.

Příklad:

$("ul li:contains('A')").addClass("blue");

Že opravdu záleží na velikosti písmen si můžete všimnout v posledním sloupci, kdy se nám nic co obsahuje malé a neobarví.

$(":empty")

Selektor :empty nám vybere elementy, které neobsahují žádný text ani vnořené elementy.

$(":checked")

Selektor vybere zaškrtnuté inputy typu radio či checkbox.

Příště, v lekci Selektory v jQuery, část třetí, si ukážeme další pseudoselektory, co jsme neprobrali.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.