Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se C a C++. Zároveň využij akce až 80 % zdarma při nákupu e-learningu - více informací.
c week

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:

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")

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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ě, 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š.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Předchozí článek
Selektory v jQuery, část první
Všechny články v sekci
jQuery - Dynamické doplňky webu snadno a rychle
Přeskočit článek
(nedoporučujeme)
Selektory v jQuery, část třetí
Článek pro vás napsal Honza Bittner
Avatar
Uživatelské hodnocení:
43 hlasů
Student FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity

 

 

Komentáře

Avatar
Patrik Pastor:4.4.2019 20:42

Kdyz "ul li:first-child" = Nejde (pred li je h2), tak jak je mozne ze "ul li:last-child" uz jde, kdyz tam plati stejna logika?

 
Odpovědět
4.4.2019 20:42
Avatar
Odpovídá na Patrik Pastor
Lukáš Korel:24.7.2019 22:31

Je to proto, že první element není typu li, ale typu h2, zatímco první prvek od konce (:last-child) typu li je, proto to tam jde, kdyby na konci seznamu byl jiný element než li, tak by to také nešlo

 
Odpovědět
24.7.2019 22:31
Avatar
Odpovídá na Patrik Pastor
Steve Jonasson:5.12.2020 19:01

Na vyzkoušení jsem si oddělal <h2> element, a následně v pohodě.

$('h2').remove();
$("ul li:first-child").addClass('blue');
Odpovědět
5.12.2020 19:01
Nejvíce se člověk naučí, když se o danou věc zajímá sám bez donucení.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
jozef.stropko:12.10.2021 9:16

Len či v tom prvom príklade nie je preklep. Ja som prepísal kód $("ul li:first-child").addClas­s("blue"); na $("ul h2:first-child").addClas­s("blue"); a už to funguje.

 
Odpovědět
12.10.2021 9:16
Avatar
Jaroslav Drobek:14. května 11:59

Hodnocení:

  • $(":first-child"): invalidní symbolická syntaxe i výklad. Dedukce: "Z vybraných elementů (v příkladu jsou to ul li) zohlední jen ty, které jsou prvním potomkem svého rodiče." Pro $(":last-child") analogicky.
  • $(":nth-child(n)"): zase nesmysl, zkuste, jestli výklad platí pro n=1..
  • $(":only-child"): "pasivní" příklad, který vykládanou vlastnost viditelně nedemonstruje, by bylo dobré uvádět bez výstupu a raději v kombinaci s nějakým "aktivním".
Editováno 14. května 12:01
 
Odpovědět
14. května 11:59
Avatar
Jaroslav Drobek:14. května 11:59

Hodnocení (pokračování):

  • $(":only-of-type"): zbytečně imperativní výklad s chybou: "jiného typu".
  • Obecně se dají všechny pseudoselektory v této lekci vysvětlit jednoduše: "element vyselektovaný před dvojtečkou bude vybrán, má-li vztah k rodiči vyjádřený vlastností za dvojtečkou."
 
Odpovědět
14. května 11:59
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.

Zobrazeno 6 zpráv z 6.