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

JavaScript jQuery Selektory v jQuery, část první American English version English version

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

Your page
localhost

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:

Your page
localhost

$("*")

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:

Your page
localhost

$("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:

Your page
localhost

$(".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:

Your page
localhost

$("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:

Your page
localhost

$("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:

Your page
localhost

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")

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:

Your page
localhost

$("[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:

Your page
localhost

$("[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:

Your page
localhost

$("[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:

Your page
localhost

$("[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:

Your page
localhost

$("[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:

Your page
localhost

$("[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:

Your page
localhost

$("[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:

Your page
localhost

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

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

Pokračovat budeme v příští lekci, Selektory v jQuery, část druhá.


 

Stáhnout

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

 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
18 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
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á
Aktivity (3)

 

 

Komentáře

Avatar
Radim Krkoška:26. května 13:26

A co když chci dát do toho data atributu proměnnou
Ku příkladu $("[data-nazev*='nejaka promenna']").hide()
Děkuji

 
Odpovědět 26. května 13:26
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Radim Krkoška
Honza Bittner:26. května 13:30

To si myslím udělat můžeš. Pokud bys ale tenhle selektor používal např. na odchytávání click eventů a chtěl bys v průběhu měnit obsah proměnné, nefungovalo by to, domnívám se.

Ale pro toto použití by to mělo jít.

Tj. něco jako toto.

var promenna = '69';
$("[data-nazev*='" + promenna + "']").hide();
Odpovědět 26. května 13:30
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Radim Krkoška:26. května 13:40

No ono to je právě on keyup.

 
Odpovědět 26. května 13:40
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Radim Krkoška
Honza Bittner:26. května 13:41

Tak prostě při změně vytvoř nový event a starý zruš?

Odpovědět 26. května 13:41
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Radim Krkoška:26. května 13:46

Můžeš to prosím tě upřesnit ?

 
Odpovědět 26. května 13:46
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Radim Krkoška
Honza Bittner:26. května 13:57

Třeba něco takového jako ukázka. https://jsfiddle.net/wrawo95n/

Zpočátku máš aktivní jen tlačítko "první", a po nějaké akci – zde kliknutí na přepínač – se první tlačítko zneaktivní a aktivuje se funkčnost na druhém.

Odpovědět 26. května 13:57
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Vladislav Ladicky:26. května 14:40

Nemáš náhodou na mysli niečo takéto?

function hideElement (e) {
  $(`[data-nazev*="${e.which}"]`).hide()
}

$(document).on('keyup', hideElement)
 
Odpovědět 26. května 14:40
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.

Zobrazeno 7 zpráv z 7.