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

V minulé lekci, Selektory v jQuery, část první, jsme započali průzkum selektorů jQuery. V dnešním JavaScript tutoriálu budeme pokračovat a představíme si další selektory.

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ě budeme pokračovat a selektory v lekci Selektory v jQuery, část třetí dokončíme.