7. diel - Selektory v jQuery, časť druhá

V minulej lekcii, Selektory v jQuery, časť prvá , sme začali prieskum selektorov jQuery. V dnešnom JavaScript tutoriálu budeme pokračovať a predstavíme si ďalšie selektory.

Príprava stránky

Rovnako ako minule si selektory budeme ukazovať na rovnakom HTML dokumentu. Pre úplnosť uvádzam znovu jeho HTML a CSS časti:

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 vyzerá takto:

Pseudoselektory

Pseudo-selektory sa rozumie také selektory, ktoré vyberajú elementy podľa nejakej ich vlastnosti.

$ ( ": first-child")

Selektor :first-child nám vyberie, ako už iste tušíte z názvu, prvého potomka alebo potomkov z nejakého rodičovského elementu alebo elementov.

Príklad:

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

výsledok:

$ ( ": first-of-type")

Pomocou :first-of-type vyberieme prvý element daného typu v rodičovskom elementu. Typom myslíme napríklad odstavec - p.

Príklad:

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

výsledok:

Aký je teda rozdiel medzi :first-child a :first-of-type ?

Keď si skúsime na našom príklade použiť tieto selektory, zistíme, že nám funguje len :first-of-type. Je to tým, že v našom zozname je prvý element nadpis. li:first-child teda v zozname nie je.

$ ( ": last-child")

Je opakom :first-child, vyberie nám posledný element z rodičovského elementu. Ako u všetkých jQuery metód platí, že je možné vybrať aj viac elementov (napr. Posledná elementy z niekoľkých zoznamov). U ďalších metód a selektorov už túto informáciu nebudeme zmieňovať.

Príklad:

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

výsledok:

$ ( ": last-of-type")

Selektor :last-of-type nám vyberie posledného potomka daného typu v danom rodičovskom elementu.

Príklad:

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

výsledok:

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

Tento selektor vyberie n-tý element v danom rodičovskom elementu.

Príklad:

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

výsledok:

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

A teraz vyberieme zas n-tý element daného typu.

Príklad:

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

výsledok:

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

Tento selektor je podobný ako :nth-child(n), avšak tu vyberáme od konca.

Príklad:

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

výsledok:

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

Rovnako ako u predchádzajúceho selektora vyberáme od konca, teraz však iba elementy daného typu.

Príklad:

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

výsledok:

$ ( ": only-child")

Selektor nám vyberie všetky elementy, ktoré sú v danom rodičovskom elemente samy.

Príklad:

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

výsledok:

$ ( ": only-of-type")

Variant predchádzajúceho selektora s tým, že sa v rodičovskom elemente musí nachádzať jediný element daného typu. V tomto prípade sa v rodičmi môžu nachádzať ďalšie elementy iného typy.

Príklad:

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

výsledok:

Zaradiť sem môžeme i špeciálne jQuery selektory :lt(), :gt(), :odd, :even, :first, :last a :eq(). O nich si ale povieme až nabudúce.

Filter obsahu

Na záver dnešnej lekcie si predstavíme selektory, ktoré slúžia na filtrovanie obsahu nejakého rodičovského elementu.

$ ( ": not ()")

Selektor :not() zneguje ľubovoľný selektor. Vyberie teda elementy, ktoré ho nespĺňajú.

Príklad:

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

výsledok:

$ ( ": contains ()")

Tento selektor nám vyberie elementy, ktoré obsahujú vo vnútornom texte nejaký podreťazec (napr. Slovo). Dávajte si pozor na veľkosť písmen, selektor je na ňu citlivý.

Príklad:

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

Že naozaj záleží na veľkosti písmen si môžete všimnúť v poslednom stĺpci, kedy sa nám nič čo obsahuje malé a nezadarbia.

$ ( ": empty")

Selektor :empty nám vyberie elementy, ktoré neobsahujú žiadny text ani vnorené elementy.

$ ( ": checked")

Selektor vyberie zaškrtnuté Input typu radio či checkbox.

Nabudúce budeme pokračovať a selektory v lekcii Selektory v jQuery, časť tretia dokončíme.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.