8. diel - Selektory v jQuery, časť tretia

V minulej lekcii, Selektory v jQuery, časť druhá , sme pokračovali s prieskumom jQuery selektorov. V dnešnom JavaScript tutoriálu túto tému dokončíme.

Príprava HTML obsahu

Rovnako ako minule si selektory budeme ukazovať na rovnakom HTML dokumentu. Pre úplnosť uvádzam 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 vyzerá zatiaľ takto:

JQuery selektory

$ ( ": header")

Selektor :header nám vyberie všetky nadpisy, teda elementy <h1>, <h2>... až do <h6>.

Príklad:

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

výsledok:

$ ( ": animated")

Pomocou selektora :animated vyberieme všetky elementy, ktoré sa práve animujú. Môžeme ho využiť pre úpravu bežiacich animácií.

$ ( ": hidden")

Pomocou :hidden vyberieme všetky elementy, ktoré sú skryté, teda majú display: none.

$ ( ": visible")

Naopak selektor :visible nám zas vyberie všetky elementy, ktoré sú viditeľné. Majú teda iný display ako je display: none.

$ ( ": lt (i)")

Tento selektor vyberie daný počet elementov z výberu, ktorých index je menší ako zadaný. Technicky je vybrané i prvých elementov. Pokiaľ zadáme záporný počet, budú sa indexy počítať od konca.

Príklad:

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

výsledok:

A skúsme si aj záporný index:

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

výsledok:

$ ( ": gt (i)")

Selektor :gt nám vyberie všetky elementy, ktoré majú index väčší ako aj. Indexy sa počítajú od 0. Môžeme zadať aj zápornú hodnotu, čím opäť spôsobíme, že sa indexy budú počítať od konca.

Príklad:

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

výsledok:

A ukážme si aj použitie záporného indexu:

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

výsledok:

$ ( ": odd")

Tento selektor vyberie všetky položky s nepárnym indexom. Počítané od nuly.

Príklad:

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

výsledok:

$ ( ": even")

Selektor, ako asi tušíte, vyberie všetky položky s párnym indexom. Počítané od nuly.

Príklad:

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

výsledok:

$ ( ": first")

Pomocou :first vyberieme z elementov, ktoré zodpovedajú danému selektoru, len ten prvý.

Príklad:

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

výsledok:

$ ( ": last")

A pomocou :last vyberieme z elementov, ktoré zodpovedajú danému selektoru, ten posledný.

Príklad:

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

výsledok:

$ ( ": eq (i)")

Ak chceme z elementov, ktoré nám selektor vybral, získať element pod určitým indexom, využijeme na to :eq. Pri zadaní zápornej hodnoty sa index počíta odzadu.

Príklad:

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

výsledok:

A negatívny index:

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

výsledok:

$ ( ": has (selector)")

Selektor :has vyberie všetky elementy, ktoré v sebe obsahujú daného potomka.

Príklad:

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

výsledok:

$ ( ": parent")

Tento selektor nám vyberie rodičovskej elementy všetkých elementov vo výbere.

Príklad:

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

výsledok:

JQuery selektory pre formulár

Knižnica jQuery obsahuje tiež niekoľko selektorov pre formuláre. Sú to vlastne skratky k nám už známym selektorům.

$ ( "input")

Tento selektor nám vyberie úplne všetky input.

$ ( ": button")

Selektor :button nám vyberie všetky tlačidlá. Je teda rovnaký ako $("button") alebo $("input[type='button']").

$ ( ": checkbox")

Vyberie všetky checkboxy, ekvivalent môže byť $("input[type='checkbox']").

$ ( ": file")

Selektor je rovnaký ako $("input[type='file']"). Input typu file je tlačidlo, ktoré nám umožní vybrať nejaký súbor z počítača a ten následne nahrať napríklad na server.

$ ( ": image")

Selektor nám vyberie všetky input s type="image". Zodpovedá teda zápisu $("[type='image']"").

$ ( ": password")

Input určená pre hesla nám vyberie tento selektor. Je rovnaký ako $("input[type='password']").

$ ( ": radio")

Selektor vyberie všetky radio buttony, možno ho zapísať aj ako $("input[type='redio']").

$ ( ": reset")

Tento selektor nám vyberie všetky, pre niekoho možno neznáma, resetovacie tlačidla. Dá sa zapísať aj ako $("input[type='reset']"). Resetovacie tlačidla nastaví všetkým poliam formulára predvolené hodnoty.

$ ( ": selected")

Selektor vyberie všetky vybrané možnosti reprezentovanej elementy <option>. Nefunguje však pre :checked, teda pre radio buttony alebo checkbox.

$ ( ": submit")

Selektor je určený pre vybranie inputov typu submit. Teda tých, ktoré vám odošlú formulár. Zodpovedá selektora $("input[type='submit']").

$ ( ": text")

Vyberie input typu text. Dá sa alternatívne zapísať ako $("input[type='text']").

Týmto máme selektory v jQuery prebranej! V budúcej lekcii, Štýlovanie v jQuery , sa budeme zaoberať stylovaním.

 

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