6. diel - Selektory v jQuery, časť prvá

V minulej lekcii, Triedy v jQuery (DOM) , sme sa naučili pracovať so triedami v knižnici jQuery. V dnešnom JavaScript tutoriále si ukážeme, aké selektory môžeme v jQuery používať. Tá totiž okrem selektorov známych z CSS ponúka i mnoho ďalších.

Selektor

Čo je to selektor? Vieme, že stránka je tvorená DOM štruktúrou, ktorá obsahuje rôzne elementy. Tie musíme nejako vybrať, aby sme ich mohli napríklad v CSS ostylovat alebo v JavaScripte animovať (alebo s nimi jakkkoli inak pracovať). Selektor nám umožňuje tieto elementy z domov vybrať.

Všetky selektory zapisujeme medzi zátvorky do funkcie jQuery(), skrátene do $(). Selektor sa môže skladať z viacerých za sebou zapísaných selektorov.

Poďme si teda ukázať danej selektory.

Príprava stránky

Všetko si ukážeme na pomerne rozsiahlom HTML dokumentu, ktorý je ostylován pomocou CSS. Funkčnosť rôznych selektorov si overíme pomocou pridávanie tried, čo už vieme z "javascript/jquery-zaklady/tutorial-jquery-dom-tridy > minulé lekcie.

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 bude vyzerať takto:

Základné selektory

Vysvetlime si najprv niekoľko základných selektorov, ktoré sa používajú najčastejšie a ktoré nájdeme aj v CSS. Vyberajú nám elementy podľa názvu elementu alebo podľa jeho umiestnenia.

$ ( "element")

Selektor označí všetky elementy daného typu. Môžeme použiť aj selektor $("element element2"), ktorý nám spresní polohu elementov. Tu konkrétne, že označujeme <element2>, vložený v <element>.

Príklad:

$("li").addClass("blue");

výsledok:

$ ( "*")

Selektor označí úplne všetko. Pokiaľ ho použijeme po nejakom inom selektora, napríklad $("div *"), označí nám všetky elementy, ktoré <div> obsahuje.

$ ( "# id")

Elementy podľa id, teda ich jedinečného identifikátora, vyberáme napísaním názvu id, ktorý predsadíme mriežkou - #. Napríklad #mojeID.

Príklad:

$("#barvy").addClass("blue");

výsledok:

$ ( "selector1, selector2, selectorN")

Môžeme uviesť aj viac selektorov, ktoré spolu nijako nesúvisí, a tak označiť rôzne časti stránky. Všetko stále zadávame ako jeden reťazec, úvodzovky teda píšeme iba na okrajoch.

Príklad:

$("#barvy li, #web li").addClass("blue");

výsledok:

$ ( ". class")

Obdobne ako podľa id môžeme označovať aj na základe triedy. Pred ňou musíme napísať bodku, teda napríklad .mojeTrida.

$ ( "rodic> potomok")

Znak > medzi elementy v selektora hovorí, že elementy v sebe musí byť priamo vložené. Aby selektor fungoval, nesmie byť medzi nimi žiadni ďalší potomkovia.

Príklad:

$("#web > li").addClass("blue");

výsledok:

$ ( "predchozi + dalsi")

Tiež môžeme použiť znak +, ktorý nám vyberie element nasledujúce bezprostredne za daným elementom (teda ktorý je tesne vedľa neho). Elementy musia byť na rovnakej úrovni.

Príklad:

$("#desktop + ul li").addClass("blue");

výsledok:

$ ( "predchozi ~ súrodenci")

Tento selektor využíva znak ~, ktorý nám vyberie všetky nasledujúce súrodenca daného elementu. Súrodenci myslíme elementy na rovnakej úrovni.

Príklad:

$("#desktop ~ ul li").addClass("blue");

výsledok:

Ohľadom základných selektorov to bude asi všetko. Prejdime k tým pokročilejším

Selektor atribútov

V selektor môžeme využiť tiež atribúty HTML elementov (napríklad placeholder, type, href, alebo niečo vlastného - data-cokoli).

Každá položka v zozname nezmysly má nejakú hodnotu zapísanú v atribútu data-nesmysl. Ukážme si, ako môžeme túto hodnotu filtrovať a vybrať iba obsah, ktorý chceme.

$ ( "atribút")

Selektor nám vyberie len tie elementy, ktoré majú v danom atribúte danú hodnotu. Môžu mať tiež danú hodnotu a za ňou po pomlčce - niečo ďalšie.

Príklad:

$("[data-nesmysl|='69']").addClass("blue");

výsledok:

$ ( "[atribút * = 'hodnota']")

Tento selektor nám vyberie elementy s daným atribútom, v ktorých hodnote sa nachádza daný podreťazec.

Príklad:

$("[data-nesmysl*='69']").addClass("blue");

výsledok:

$ ( "[atribút ~ = 'slovo']")

Tento selektor porovnáva, či atribút elementov obsahuje dané slovo. Hodnotou atribútu môže byť aj viac slov, teda napríklad "dnes je slnečno", kde sú slová oddelené medzerami.

Príklad:

$("[data-nesmysl~='69']").addClass("blue");

výsledok:

$ ( "[atribút $ = 'hodnota']")

Pri použití tohto selektora musí hodnota daného atribútu končiť daným podreťazcom.

Príklad:

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

výsledok:

$ ( "[atribút = 'hodnota']")

Selektor vyberie len také elementy, kde bude hodnota Attribut presne rovnaká ako daná hodnota.

Príklad:

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

výsledok:

$ ( "[atribút! = 'hodnota']")

Selektor vyberie elementy, ktoré v danom atribúte nemajú danú hodnotu.

Pri tomto selektora dávajte obzvlášť pozor, pretože ak ho uvediete samotný, označí celú stránku. Používajte ho teda skôr ako doplňujúci selektor, napr. Za ul li.

Príklad:

$("[data-nesmysl!='69']").addClass("blue");

výsledok:

$ ( "[atribút ^ = 'hodnota']")

Tento selektor je podobný ako ten s $, ale tu musí hodnota atribútu začínať na daný podreťazec.

Príklad:

$("[data-nesmysl^='69']").addClass("blue");

výsledok:

$ ( "[attribute]")

Môžeme tiež vybrať len tie elementy, ktoré majú definovaný nejaký atribút, nezávisle na jeho hodnote.

Príklad:

$("[data-nesmysl]").addClass("blue");

výsledok:

$ ( "[atribút = 'value'] [atribute2 = 'value']")

Vyššie uvedené zápisy môžeme uviesť hneď pre niekoľko atribútov.

Pokračovať budeme v nasledujúcej lekcii, Selektory v jQuery, časť druhá .

 

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