Lekce 6 - Selektory v jQuery, část první

V minulé lekci, Třídy v jQuery (DOM), jsme se naučili pracovat se třídami v knihovně jQuery.

V dnešním JavaScript tutoriálu si ukážeme, jaké selektory můžeme v jQuery používat. Ta totiž kromě selektorů známých z CSS nabízí i mnoho dalších.

Selektor

Co je to selektor? Víme, že stránka je tvořena DOM strukturou, která obsahuje různé elementy. Ty musíme nějak vybrat, abychom je mohli například v CSS ostylovat nebo v JavaScriptu animovat (nebo s nimi jakkkoli jinak pracovat). Selektor nám umožňuje tyto elementy z DOMu vybrat.

Všechny selektory zapisujeme mezi závorky do funkce jQuery(), zkráceně do $(). Selektor se může skládat z více za sebou zapsaných selektorů.

Pojďme si tedy ukázat dané selektory.

Příprava stránky

Vše si ukážeme na poměrně rozsáhlém HTML dokumentu, který je ostylován pomocí CSS. Funkčnost různých selektorů si ověříme pomocí přidávání tříd, což již umíme z minulé lekce.

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 vypadat takto:

Základní selektory

Vysvětleme si nejprve několik základních selektorů, které se používají nejčastěji a které nalezneme i v CSS. Vybírají nám elementy podle názvu elementu nebo podle jeho umístění.

$("element")

Selektor označí všechny elementy daného typu. Můžeme použít i selektor $("element element2"), který nám upřesní polohu elementů. Zde konkrétně, že označujeme <element2>, vložený v <element>.

Příklad:

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

Výsledek:

$("*")

Selektor označí úplně vše. Pokud jej použijeme po nějakém jiném selektoru, například $("div *"), označí nám všechny elementy, které <div> obsahuje.

$("#id")

Elementy podle id, tedy jejich jedinečného identifikátoru, vybíráme napsáním názvu id, který předsadíme mřížkou - #. Například #mojeID.

Příklad:

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

Výsledek:

$("selector1, selector2, selectorN")

Můžeme uvést i více selektorů, které spolu nijak nesouvisí, a tak označit různé části stránky. Vše stále zadáváme jako jeden řetězec, uvozovky tedy píšeme pouze na okrajích.

Příklad:

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

Výsledek:

$(".class")

Obdobně jako podle id můžeme označovat i na základě třídy. Před ní musíme napsat tečku, tedy například .mojeTrida.

$("rodic > potomek")

Znak > mezi elementy v selektoru říká, že elementy v sobě musí být přímo vložené. Aby selektor fungoval, nesmí být mezi nimi žádní další potomci.

Příklad:

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

Výsledek:

$("predchozi + dalsi")

Také můžeme použít znak +, který nám vybere element následující bezprostředně za daným elementem (tedy který je těsně vedle něj). Elementy musí být na stejné úrovni.

Příklad:

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

Výsledek:

$("predchozi ~ sourozenci")

Tento selektor využívá znak ~, který nám vybere všechny následující sourozence daného elementu. Sourozenci myslíme elementy na stejné úrovni.

Příklad:

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

Výsledek:

Ohledně základních selektorů to bude asi vše. Přejděme k těm pokročilejším

Selektor atributů

V selektorech můžeme využít také atributy HTML elementů (například placeholder, type, href, nebo něco vlastního - data-cokoli).

Každá položka v seznamu NESMYSLY má nějakou hodnotu zapsanou v atributu data-nesmysl. Ukažme si, jak můžeme tuto hodnotu filtrovat a vybrat pouze obsah, který chceme.

$("[atribut|='hod­nota']")

Selektor nám vybere jen ty elementy, které mají v daném atributu danou hodnotu. Mohou mít také danou hodnotu a za ní po pomlčce - něco dalšího.

Příklad:

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

Výsledek:

$("[atribut*='hod­nota']")

Tento selektor nám vybere elementy s daným atributem, v jejichž hodnotě se nachází daný podřetězec.

Příklad:

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

Výsledek:

$("[atribut~='slo­vo']")

Tento selektor porovnává, jestli atribut elementů obsahuje dané slovo. Hodnotou atributu může být i více slov, tedy například "dnes je slunečno", kde jsou slova oddělená mezerami.

Příklad:

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

Výsledek:

$("[atribut$='hod­nota']")

Při použití tohoto selektoru musí hodnota daného atributu končit daným podřetězcem.

Příklad:

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

Výsledek:

$("[atribut='hod­nota']")

Selektor vybere jen takové elementy, kde bude hodnota attributu přesně stejná jako daná hodnota.

Příklad:

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

Výsledek:

$("[atribut!='hod­nota']")

Selektor vybere elementy, které v daném atributu nemají danou hodnotu.

U tohoto selektoru dávejte obzvlášť pozor, jelikož pokud jej uvedete samotný, označí celou stránku. Používejte jej tedy spíše jako doplňující selektor, např. za ul li.

Příklad:

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

Výsledek:

$("[atribut^='hod­nota']")

Tento selektor je podobný jako ten s $, ale zde musí hodnota atributu začínat na daný podřetězec.

Příklad:

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

Výsledek:

$("[attribute]")

Můžeme také vybrat jen ty elementy, které mají definovaný nějaký atribut, nezávisle na jeho hodnotě.

Příklad:

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

Výsledek:

$("[atribut='va­lue'][atribute2='va­lue']")

Výše uvedené zápisy můžeme uvést hned pro několik atributů.

V příští lekci, Selektory v jQuery, část druhá, si ukážeme pseudoselektory.

 

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