Lekce 8 - Selektory v jQuery, část třetí

V minulé lekci, Selektory v jQuery, část druhá, jsme si ukázali pseudoselektory, co nám jQuery nabízí.

Příprava HTML obsahu

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

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;
}

Dokument vypadá zatím takto:

jQuery selektory

$(":header")

Selektor :header nám vybere všechny nadpisy, tedy elementy <h1>, <h2>... až do <h6>.

Příklad:

$(":header").addClass("blue");

Výsledek:

$(":animated")

Pomocí selektoru :animated vybereme všechny elementy, které se právě animují. Můžeme jej využít pro úpravu běžících animací.

$(":hidden")

Pomocí :hidden vybereme všechny elementy, které jsou skryté, tedy mají display: none.

$(":visible")

Naopak selektor :visible nám zas vybere všechny elementy, které jsou viditelné. Mají tedy jiný display než je display: none.

$(":lt(i)")

Tento selektor vybere daný počet elementů z výběru, jejichž index je menší než zadaný. Technicky je vybráno i prvních elementů. Pokud zadáme záporný počet, budou se indexy počítat od konce.

Příklad:

$("ul li:lt(20)").addClass("blue");

Výsledek:

A zkusme si i záporný index:

$("ul li:lt(-20)").addClass("blue");

Výsledek:

$(":gt(i)")

Selektor :gt nám vybere všechny elementy, které mají index větší než i. Indexy se počítají od 0. Můžeme zadat i zápornou hodnotu, čímž opět způsobíme, že se indexy budou počítat od konce.

Příklad:

$("ul li:gt(20)").addClass("blue");

Výsledek:

A ukažme si i použití záporného indexu:

$("ul li:gt(-20)").addClass("blue");

Výsledek:

$(":odd")

Tento selektor vybere všechny položky s lichým indexem. Počítáno od nuly.

Příklad:

$("ul li:odd").addClass("blue");

Výsledek:

$(":even")

Selektor, jak asi tušíte, vybere všechny položky se sudým indexem. Počítáno od nuly.

Příklad:

$("ul li:even").addClass("blue");

Výsledek:

$(":first")

Pomocí :first vybereme z elementů, které odpovídají danému selektoru, pouze ten první.

Příklad:

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

Výsledek:

$(":last")

A pomocí :last vybereme z elementů, které odpovídají danému selektoru, ten poslední.

Příklad:

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

Výsledek:

$(":eq(i)")

Pokud chceme z elementů, které nám selektor vybral, získat element pod určitým indexem, využijeme k tomu :eq. Při zadání záporné hodnoty se index počítá odzadu.

Příklad:

$("ul li:eq(5)").addClass("blue");

Výsledek:

A negativní index:

$("ul li:eq(-5)").addClass("blue");

Výsledek:

$(":has(selector)")

Selektor :has vybere všechny elementy, které v sobě obsahují daného potomka.

Příklad:

$("ul:has(li)").addClass("blue");

Výsledek:

$(":parent")

Tento selektor nám vybere rodičovské elementy všech elementů ve výběru.

Příklad:

$("ul li:parent").addClass("blue");

Výsledek:

jQuery selektory pro formulář

Knihovna jQuery obsahuje také několik selektorů pro formuláře. Jsou to vlastně zkratky k nám již známým selektorům.

$(":input")

Tento selektor nám vybere úplně všechny inputy.

$(":button")

Selektor :button nám vybere všechny tlačítka. Je tedy stejný jako $("button") nebo $("input[type='button']").

$(":checkbox")

Vybere všechny checkboxy, ekvivalent může být $("input[type='checkbox']").

$(":file")

Selektor je stejný jako $("input[type='file']"). Input typu file je tlačítko, které nám umožní vybrat nějaký soubor z počítače a ten následně nahrát třeba na server.

$(":image")

Selektor nám vybere všechny inputy s type="image". Odpovídá tedy zápisu $("[type='image']"").

$(":password")

Inputy určená pro hesla nám vybere tento selektor. Je stejný jako $("input[type='password']").

$(":radio")

Selektor vybere všechny radio buttony, lze jej zapsat i jako $("input[type='redio']").

$(":reset")

Tento selektor nám vybere všechny, pro někoho možná neznámá, resetovací tlačítka. Dá se zapsat i jako $("input[type='reset']"). Resetovací tlačítka nastaví všem polím formuláře výchozí hodnoty.

$(":selected")

Selektor vybere všechny vybrané možnosti reprezentované elementy <option>. Nefunguje ovšem pro :checked, tedy pro radio buttony nebo checkbox.

$(":submit")

Selektor je určený pro vybrání inputů typu submit. Tedy těch, které vám odešlou formulář. Odpovídá selektoru $("input[type='submit']").

$(":text")

Vybere inputy typu text. Dá se alternativně zapsat jako $("input[type='text']").

Tímto ukončíme dnešní lekci

V příští lekci, Stylování v jQuery, se budeme zabývat stylováním.

 

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