7. díl - Selektory v jQuery, část první

JavaScript jQuery Selektory v jQuery, část první

V tomto článku si ukážeme, jaké selektory můžeme používat v jQuery, které nám kromě selektorů známých z CSS nabízí i mnoho jiných.

Selektor

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

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

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

Příprava HTML obsahu

Vše si ukážeme na poměrně rozsáhlém HTML dokumentu, který je ostylovaným CSSkem. Vše budeme ukazovat přidáváním tříd, které elementy ostylují. Pokud neumíte přidávat třídy, podívejte se na Třídy v jQuery (DOM)

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      : 100px;
   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 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 našeho elementu. Zde konkrétně že označujeme element2, vložený v element.

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

Výsledek:

$("*")

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

$("#id")

ID, tedy jedinečný identifikátor, se vybírá napsáním jeho názvu a před něj se napíše mřížka - # - například "#mojeID".

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

Výsledek: .<>

$("selector1, selector2, selectorN")

Selektor může obsahovat i více "podselektorů", které označují různé části stránky. Uvozovky píšeme jen na začátku a na konci v závorce.

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

Výsledek:

$(".class")

Obdobně jako ID můžeme označovat třídu. Před ní musíme napsat tečku, tedy například ".mojeTrida".

$("parent > child")

Znak > mezi elementy v selektoru říká, že child (dítě) musí být přímý potomek parenta (rodiče).

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

Výsledek:

$("prev + next")

Také můžeme použít +, které nám vybere následující element za prev. Next musí být na stejné úrovni (tedy vedle něj).

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

Výsledek:

$("prev ~ siblings")

Tento selektor používá ~, což nám vybere všechny následující sourozence daného elementu, tedy na stejné úrovni.

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

Výsledek:

Ohledně základních selektorů to bude asi vše.

Selektor atributů

Atribut je to, co napíšete v HTML do elementu, například placeholder, type, href, nebo něco vlastního - data-nesmysl.

Každá položka v seznamu NESMYSLY má nějakou hodnotu pro data-nesmysl, ukažme si, jak můžeme tuto hodnotu filtrovat a vybrat jen náš chtěný obsah.

$("[attribute|='va­lue']")

Tento selektor nám vybere jen ty elementy, které mají v daném atributu hodnotu value, nebo mají hodnotu "value" a za ní po pomlčce - něco dalšího.

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

Výsledek:

$("[attribute*='va­lue']")

Tento selektor nám vybere vše, kde se nachází podřetězec value, tedy value tam musí někde být.

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

Výsledek:

$("[attribute~='va­lue']")

Tento selector porovnává, jestli element obsahuje slovo. Hodnotou atributu může být i více slov, tedy například "dnes svítí sluníčko", slovo je vždy oddělené mezerami.

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

Výsledek:

$("[attribute$='va­lue']")

V tomto selectoru musí být hodnota na konci.

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

Výsledek:

$("[attribute='va­lue']")

Tento selector vybere jen takové elementy, kde bude hodnota attributu přesně stejná jako value.

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

Výsledek:

$("[attribute!='va­lue']")

V tomto selektoru nesmí být hodnota value pro daný atribut.

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

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

Výsledek:

$("[attribute^='va­lue']")

Tento selektor je podobný jako ten s $, ale zde musí atribut obsahovat value na začátku řetězce.

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

Výsledek:

$("[attribute]")

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

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

Výsledek:

$("[attribute='va­lue'][attribu­te2='value']")

Dá se samozřejmě také zapsat více atributů tímto stylem a kombinovat můžeme kterýkoli způsob.

Příště budeme pokračovat.


 

Stáhnout

Staženo 200x (2.48 kB)
Aplikace je včetně zdrojových kódů v jazyce javascript

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (14 hlasů) :
55555


 


Miniatura
Předchozí článek
Třídy v jQuery (DOM)
Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Selektory v jQuery, část druhá

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!