Lekce 7 - Selektory v jQuery, část druhá
JavaScript
jQuery
Selektory v jQuery, část druhá
English version


V minulé lekci, Selektory v jQuery, část první, jsme započali průzkum selektorů jQuery. V dnešním JavaScript tutoriálu budeme pokračovat a představíme si další selektory.
Příprava stránky
Stejně jako minule si selektory budeme ukazovat na stejném HTML dokumentu. Pro úplnost uvádím znovu jeho HTML a CSS části:
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 vypadá takto:
Pseudoselektory
Pseudo-selektory se rozumí takové selektory, které vybírají elementy podle nějaké jejich vlastnosti.
$(":first-child")
Selektor :first-child
nám vybere, jak již jistě tušíte z
názvu, prvního potomka nebo potomky z nějakého rodičovského elementu nebo
elementů.
Příklad:
$("ul li:first-child").addClass("blue");
Výsledek:
$(":first-of-type")
Pomocí :first-of-type
vybereme první element daného typu v
rodičovském elementu. Typem myslíme například odstavec -
p
.
Příklad:
$("ul li:first-of-type").addClass("blue");
Výsledek:
Jaký je tedy rozdíl mezi :first-child
a
:first-of-type
?
Když si zkusíme na našem příkladu použít tyto selektory, zjistíme,
že nám funguje jen :first-of-type
. Je to tím, že v našem
seznamu je první element nadpis. li:first-child
tedy v seznamu
není.
$(":last-child")
Je opakem :first-child
, vybere nám poslední
element z rodičovského elementu. Jako u všech jQuery metod platí, že lze
vybrat i více elementů (např. poslední elementy z několika seznamů). U
dalších metod a selektorů již tuto informaci nebudeme zmiňovat.
Příklad:
$("ul li:last-child").addClass("blue");
Výsledek:
$(":last-of-type")
Selektor :last-of-type
nám vybere posledního potomka daného
typu v daném rodičovském elementu.
Příklad:
$("ul li:last-of-type").addClass("blue"); // v našem případě stejný efekt jako minule
Výsledek:
$(":nth-child(n)")
Tento selektor vybere n-tý element v daném rodičovském elementu.
Příklad:
$("ul li:nth-child(3)").addClass("blue");
Výsledek:
$(":nth-of-type(n)")
A nyní vybereme zas n-tý element daného typu.
Příklad:
$("ul li:nth-of-type(3)").addClass("blue");
Výsledek:
$(":nth-last-child(n)")
Tento selektor je podobný jako :nth-child(n)
, avšak zde
vybíráme od konce.
Příklad:
$("ul li:nth-last-child(3)").addClass("blue");
Výsledek:
$(":nth-last-of-type(n)")
Stejně jako u předchozího selektoru vybíráme od konce, nyní ovšem pouze elementy daného typu.
Příklad:
$("ul li:nth-last-of-type(3)").addClass("blue"); // v našem případě stejný efekt jako minule
Výsledek:
$(":only-child")
Selektor nám vybere všechny elementy, které jsou v daném rodičovském elementu samy.
Příklad:
$("h2:only-child").addClass("blue");
Výsledek:
$(":only-of-type")
Varianta předchozího selektoru s tím, že se v rodičovském elementu musí nacházet jediný element daného typu. V tomto případě se v rodiči mohou nacházet další elementy jiného typy.
Příklad:
$("h2:only-of-type").addClass("blue");
Výsledek:
Zařadit sem můžeme i speciální jQuery selektory :lt()
,
:gt()
, :odd
, :even
, :first
,
:last
a :eq()
. O nich si ale povíme až
příště.
Filtr obsahu
Na závěr dnešní lekce si představíme selektory, které slouží k filtrování obsahu nějakého rodičovského elementu.
$(":not()")
Selektor :not()
zneguje libovolný selektor. Vybere tedy
elementy, které jej nesplňují.
Příklad:
$("ul li:not([data-nesmysl='69'])").addClass("blue");
Výsledek:
$(":contains()")
Tento selektor nám vybere elementy, které obsahují ve vnitřním textu nějaký podřetězec (např. slovo). Dávejte si pozor na velikost písmen, selektor je na ni citlivý.
Příklad:
$("ul li:contains('A')").addClass("blue");
Že opravdu záleží na velikosti písmen si můžete všimnout v posledním
sloupci, kdy se nám nic co obsahuje malé a
neobarví.
$(":empty")
Selektor :empty
nám vybere elementy, které neobsahují
žádný text ani vnořené elementy.
$(":checked")
Selektor vybere zaškrtnuté inputy typu radio
či
checkbox
.
Příště budeme pokračovat a selektory v lekci Selektory v jQuery, část třetí dokončíme.
Stáhnout
Staženo 178x (1.74 kB)
Aplikace je včetně zdrojových kódů v jazyce javascript
Komentáře
Zatím nikdo nevložil komentář - buď první!