9. díl - Selektory v jQuery, část třetí

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

V tomto článku si ukážeme speciální selektory, které přidalo jQuery.

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:

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;
}

jQuery selektory

$(":header")

Header nám vybere všechny nadpisy, h1, h2, h3...

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

Výsledek:

$(":animated")

Animated nám vybere všechny elementy, které se právě animují. Můžeme ho využít při podmínkách pro animaci atd.

$(":hidden")

Hidden vybere všechny elementy, které jsou skryté, tedy mají display: none. Můžeme ho využít také při podmínkách pro animaci atd.

$(":visible")

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

$(":lt(i)")

Tento selektor nám vybere určitý počet elementů na stránce. Pokud zadáme záporné číslo, vybere se nám maximum - i.

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

Výsledek:

a zkusíme si i druhou možnost,

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

Výsledek:

$(":gt(i)")

Gt nám vybere všechny elementy, které mají index větší než i. Počítáno od 0. Můžeme přidat i zápornou hodnotu, což nám efekt obrátí - počítá se to od konce.

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

Výsledek:

a ukážeme si také druhou možnost,

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

Výsledek:

$(":odd")

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

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

Výsledek:

$(":even")

Tento selektor vybere všechny položky se sudým indexem. Počítáno od 0ly.

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

Výsledek:

$(":first")

First nám vybere první výskyt na stránce.

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

Výsledek:

$(":last")

First nám vybere poslední výskyt na stránce.

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

Výsledek:

$(":eq(i)")

Eq nám označí element na určitém indexu. Počítáno od 0. Při záporné hodnotě se od 0 nepočítá.

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

Výsledek:

a druhá možnost,

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

Výsledek:

$(":has(selector)")

Has nám vybere všechny elementy, které v sobě obsahují hledaný element.

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

Výsledek:

$(":parent")

Tento selektor nám vybere všechny elementy, které jsou rodiče, tedy ty, které mají v sobě nějaký element nebo třeba i text.

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

Výsledek:

jQuery selektory pro formulář

jQuery obsahuje také pár selektorů pro formuláře, ty si ale ukazovat nebudeme. Jsou to vlastně zkrácené verze.

Všechny můžeme použít jako $(":selektor"), $("input:selek­tor") nebo třeba $("*:selektor")­...

$(":input")

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

$(":button")

Tento selektor nám vybere všechny tlačítka, je tedy stejný jako $("button") nebo $("input[type='but­ton']").

$(":checkbox")

Vyberou se nám všechny checkboxy, ekvivalent může být $("input[type='chec­kbox']").

$(":file")

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

$(":image")

Selektor nám vybere všechny input type="image", tedy je stejný jako $("[type='ima­ge']"").

$(":password")

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

$(":radio")

Selektor vybere všechny radio buttony, lze ho zapsat i jako $("input[type='re­dio']").

$(":reset")

Tento selektor nám vybere všechny, pro někoho možná neznámé, resetovací tlačítka. Dají se zapsat jako $("input[type='re­set']").

$(":selected")

Tento selektor nám vybere všechny vybrané možnosti v <option>, ale nefunguje pro :checked, tedy pro radio nebo checkbox.

$(":submit")

Selektor určený pro vybrání submit inputů, těch který vám odešlou formulář. Stejný jako $("input[type='sub­mit']").

$(":text")

Asi nejpoužívanější input, jinak se dá zapsat jako $("input[type='tex­t']"), nám vybere tento selektor.

Tímto máme selektory v jQuery probrané.


 

Stáhnout

Staženo 178x (1.74 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 (5 hlasů) :
4.64.64.64.64.6


 


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

 

 

Komentáře

Avatar
Taskkill
Redaktor
Avatar
Taskkill:

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:

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
Redaktor
Avatar
Odpovídá na Taskkill
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Taskkill
Honza Bittner:

// double post

Editováno 27.4.2014 0:10
Odpovědět 27.4.2014 0:10
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Taskkill
Redaktor
Avatar
Taskkill:

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
Redaktor
Avatar
Odpovídá na Taskkill
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:

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
Redaktor
Avatar
Odpovídá na Taskkill
Honza Bittner:

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

Odpovědět 27.4.2014 1:02
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:

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.