Lekce 8 - Selektory v jQuery, část třetí

JavaScript jQuery Selektory v jQuery, část třetí

Unicorn College ONEbit hosting 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, Selektory v jQuery, část druhá, jsme pokračovali s průzkumem jQuery selektorů. V dnešním JavaScript tutoriálu toto téma dokončíme.

Příprava HTML obsahu

Stejně jako minule si selektory budeme ukazovat na stejném HTML dokumentu. Pro úplnost uvádím 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 vypadá zatím takto:

Your page
localhost

jQuery selektory

$(":header")

Selektor :header nám vybere všechny nadpisy, tedy elementy <h1>, <h2>... až do <h6>.

Příklad:

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

Výsledek:

Your page
localhost

$(":animated")

Pomocí selektoru :animated vybereme všechny elementy, které se právě animují. Můžeme jej využít pro úpravu běžících animací.

$(":hidden")

Pomocí :hidden vybereme všechny elementy, které jsou skryté, tedy mají display: none.

$(":visible")

Naopak selektor :visible nám zas vybere všechny elementy, které jsou viditelné. Mají tedy jiný display než je display: none.

$(":lt(i)")

Tento selektor vybere daný počet elementů z výběru, jejichž index je menší než zadaný. Technicky je vybráno i prvních elementů. Pokud zadáme záporný počet, budou se indexy počítat od konce.

Příklad:

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

Výsledek:

Your page
localhost

A zkusme si i záporný index:

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

Výsledek:

Your page
localhost

$(":gt(i)")

Selektor :gt nám vybere všechny elementy, které mají index větší než i. Indexy se počítají od 0. Můžeme zadat i zápornou hodnotu, čímž opět způsobíme, že se indexy budou počítat od konce.

Příklad:

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

Výsledek:

Your page
localhost

A ukažme si i použití záporného indexu:

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

Výsledek:

Your page
localhost

$(":odd")

Tento selektor vybere všechny položky s lichým indexem. Počítáno od nuly.

Příklad:

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

Výsledek:

Your page
localhost

$(":even")

Selektor, jak asi tušíte, vybere všechny položky se sudým indexem. Počítáno od nuly.

Příklad:

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

Výsledek:

Your page
localhost

$(":first")

Pomocí :first vybereme z elementů, které odpovídají danému selektoru, pouze ten první.

Příklad:

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

Výsledek:

Your page
localhost

$(":last")

A pomocí :last vybereme z elementů, které odpovídají danému selektoru, ten poslední.

Příklad:

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

Výsledek:

Your page
localhost

$(":eq(i)")

Pokud chceme z elementů, které nám selektor vybral, získat element pod určitým indexem, využijeme k tomu :eq. Při zadání záporné hodnoty se index počítá odzadu.

Příklad:

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

Výsledek:

Your page
localhost

A negativní index:

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

Výsledek:

Your page
localhost

$(":has(selector)")

Selektor :has vybere všechny elementy, které v sobě obsahují daného potomka.

Příklad:

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

Výsledek:

Your page
localhost

$(":parent")

Tento selektor nám vybere rodičovské elementy všech elementů ve výběru.

Příklad:

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

Výsledek:

Your page
localhost

jQuery selektory pro formulář

Knihovna jQuery obsahuje také několik selektorů pro formuláře. Jsou to vlastně zkratky k nám již známým selektorům.

$(":input")

Tento selektor nám vybere úplně všechny inputy.

$(":button")

Selektor :button nám vybere všechny tlačítka. Je tedy stejný jako $("button") nebo $("input[type='button']").

$(":checkbox")

Vybere všechny checkboxy, ekvivalent může být $("input[type='checkbox']").

$(":file")

Selektor je stejný jako $("input[type='file']"). Input typu file je tlačítko, které nám umožní vybrat nějaký soubor z počítače a ten následně nahrát třeba na server.

$(":image")

Selektor nám vybere všechny inputy s type="image". Odpovídá tedy zápisu $("[type='image']"").

$(":password")

Inputy určená pro hesla nám vybere tento selektor. Je stejný jako $("input[type='password']").

$(":radio")

Selektor vybere všechny radio buttony, lze jej zapsat i jako $("input[type='redio']").

$(":reset")

Tento selektor nám vybere všechny, pro někoho možná neznámá, resetovací tlačítka. Dá se zapsat i jako $("input[type='reset']"). Resetovací tlačítka nastaví všem polím formuláře výchozí hodnoty.

$(":selected")

Selektor vybere všechny vybrané možnosti reprezentované elementy <option>. Nefunguje ovšem pro :checked, tedy pro radio buttony nebo checkbox.

$(":submit")

Selektor je určený pro vybrání inputů typu submit. Tedy těch, které vám odešlou formulář. Odpovídá selektoru $("input[type='submit']").

$(":text")

Vybere inputy typu text. Dá se alternativně zapsat jako $("input[type='text']").

Tímto máme selektory v jQuery probrané! V příští lekci, Stylování v jQuery, se budeme zabývat stylováním.


 

Stáhnout

Staženo 193x (1.74 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?
8 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
Selektory v jQuery, část druhá
Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Stylování v jQuery
Aktivity (2)

 

 

Komentáře

Avatar
Taskkill
Redaktor
Avatar
Taskkill:26.4.2014 23:27

Ahoj, dovolím si dotaz, nepřijde Ti, že ohledně selektorů lt a gt jsou jejich příklady se zápornou hodnotou prohozené...protože když to spočítáš...no ale možná se pletu...řekni sám

 
Odpovědět 26.4.2014 23:27
Avatar
Taskkill
Redaktor
Avatar
Taskkill:26.4.2014 23:46

Teda, ne že by to tak fungovalo...proh­lížeč souhlasí s tím co píšeš, ale jde mi o vysvětlení

 
Odpovědět 26.4.2014 23:46
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Taskkill
Honza Bittner:27.4.2014 0:10

Myslím že to je zrovna ta "chyba" nad kterou jsem se pozastavoval také. Jelikož jedno počítá od "nuly", druhé zase ne... Nevím čím to je ;)

Pokud jsi myslel něco jiného tak napiš co ;)

Odpovědět 27.4.2014 0:10
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Taskkill
Honza Bittner:27.4.2014 0:10

// double post

Editováno 27.4.2014 0:10
Odpovědět 27.4.2014 0:10
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Taskkill
Redaktor
Avatar
Taskkill:27.4.2014 0:27

schválně koukni na tohle https://api.jquery.com/gt-selector/ .. konkrétně ten příklad s tabulkou je zajímavej...jako by gt-2 rázem znamenalo něco jako vyber MENŠÍ než 2 kromě počítáno od zadu...a ještě počítáno od jedné nikoliv od nuly...no u tvých příkladů to tak taky vypadá ne?

 
Odpovědět 27.4.2014 0:27
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Taskkill
Honza Bittner:27.4.2014 0:29

Jojo, nevím proč to tak je...

I v definici píšou

-index: Zero-based index, counting backwards from the last element.

... :D

Odpovědět 27.4.2014 0:29
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:27.4.2014 0:31

takže nejenom, že není pravda že by byl zero-counting ale navíc ten mínus úplně obrací význam z greather than je rázen lesser than souhlasíš se mnou? jde mi vlastně jen o to jestli to tak vidíš taky...přijmu to jako šílenej rozmar lidí od googlu a budu na to pamatovat...

 
Odpovědět 27.4.2014 0:31
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Taskkill
Honza Bittner:27.4.2014 1:02

To s tou nulou souhlasím, ale pořád to je greather than, avšak odzadu.

Odpovědět 27.4.2014 1:02
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:27.4.2014 1:15

S tím právě úplně nesouhlasím...když budu počítat odzadu tak budou obarvený ty od 1-19...no ne? a to je MENŠÍ než 20

 
Odpovědět 27.4.2014 1:15
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 9 zpráv z 9.