7. díl - Selektory v jQuery, část druhá

JavaScript jQuery Selektory v jQuery, část druhá

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

Your page
localhost

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:

Your page
localhost

$(":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:

Your page
localhost

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:

Your page
localhost

$(":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:

Your page
localhost

$(":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:

Your page
localhost

$(":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:

Your page
localhost

$(":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:

Your page
localhost

$(":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:

Your page
localhost

$(":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:

Your page
localhost

$(":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:

Your page
localhost

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:

Your page
localhost

$(":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í.

Your page
localhost

$(":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.


 

Stáhnout

Staženo 168x (1.74 kB)
Aplikace je včetně zdrojových kódů v jazyce javascript

 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
13 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Miniatura
Předchozí článek
Selektory v jQuery, část první
Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Selektory v jQuery, část třetí
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!