Zadaća osnovnih filtera je ograničavanje skupine odabranih elemenata na samo one koje zadovoljavju uvjet postavljen filterom. Možemo odabrati prvi, posljednji element...
CDN pohrana slika i videa.
Pretvorba formata slika: webp...
Vrhunsko AI povećanje slika!
25Gb podataka.
Zašto ne sada?
Primjer web stranice na kojoj ćemo primijeniti osnovne filtre.
<body>
<p>Prvi odlomak</p>
<p>Drugi odlomak</p>
<p>Treći odlomak</p>
<p>Četvrti odlomak</p>
<p>Peti odlomak</p>
</body>
Zadaća osnovnih filtera je ograničavanje skupine odabranih elemenata na one koje odgovaraju selektoru.
Primjer osnovnog filtera koji selektira samo prvi element popisa:
$(function()
{
$('p:first')
.css('color', 'blue');
});Objašnjenje: Budući da je selektiran samo prvi element popisa, ostali su izuzeti od učinka funkcije css( ).
Prvi odlomak Drugi odlomak Treći odlomak Četvrti odlomak Peti odlomak
Primjer osnovnog filtera koji selektira samo posljednji element popisa:
$(function()
{
$('p:last')
.css('color', 'blue');
});Objašnjenje: Budući da je selektiran samo posljednji element popisa ostali ostaju nepromijenjeni.
Prvi odlomak Drugi odlomak Treći odlomak Četvrti odlomak Peti odlomak
Primjer osnovnog filtera koji selektira sve elemente popisa koji imaju parnu vrijednost indeksa (0, 2, 4...):
$(function()
{
$('p:even')
.css('color', 'blue');
});Objašnjenje: Selektiramo sve parne elemente popisa, dakle one koji imaju parnu vrijednost indeksa (0, 2, 4...).
Prva točka Drugi odlomak Treći odlomak Četvrti odlomak Peti odlomak
Primjer osnovnog filtera koji selektira sve elemente popisa koji imaju neparnu vrijednost indeksa (1, 3, 5...):
$(function()
{
$('p:odd')
.css('color', 'blue');
});Objašnjenje: Selektiramo sve neparne elemente popisa, dakle one koji imaju neparnu vrijednost indeksa (1, 3, 5...).
Prvi odlomak Druga točka Treći odlomak Četvrti odlomak Peti odlomak
Primjer osnovnog filtera koji selektira treći element popisa. Zašto treći, a ne drugi? Zato što indeksi elemenata počinju s nulom, tako da treći element ima vrijednost indeksa 2.
$(function()
{
$('p:eq(2)')
.css('color', 'blue');
});Objašnjenje: Budući da je indeks prvog elementa jednak 0, indeks 2 označava treći elementa po redu.
Prvi odlomak Drugi odlomak Treći odlomak Četvrti odlomak Peti odlomak
Primjer osnovnog filtera koji selektira elemente popisa čija je vrijednost indeksa veća od 2.
$(function()
{
$('p:gt(2)')
.css('color', 'blue');
});Objašnjenje: Budući da je indeks prvog elementa jednak 0, indeks 2 označava treći element po redu. Dakle veći od trećeg elementa su četvrti i peti element. Izgled u web pregledniku:
Prvi odlomak Drugi odlomak Treći odlomak Četvrti odlomak Peti odlomak
Primjer osnovnog filtera koji selektira elemente popisa čija je vrijednost indeksa manja od 2.
$(function()
{
$('p:lt(2)')
.css('color', 'blue');
});Objašnjenje: Budući da je indeks prvog elementa jednak 0, indeks 2 označava treći element po redu. Dakle manji od trećeg elementa su prvi i drugi element. Izgled u pregledniku:
Prvi odlomak Drugi odlomak Treći odlomak Četvrti odlomak Peti odlomak
Primjer filtera koji selektira sve elemente osim elementa indeksa 2.
$(function()
{
$('p:not(eq(2))')
.css('color', 'blue');
});Objašnjenje: Budući da je indeks prvog elementa jednak 0, indeks 2 označava treći elementa po redu. Dakle svi elementi osim trećeg elementa su prvi, drugi, četvrti i peti element. Izgled u pregledniku:
Prvi odlomak Drugi odlomak Treći odlomak Četvrti odlomak Peti odlomak
Primjer filtera koji selektira sve elemente naslova od <h1> do <h6>.
$(function()
{
$(':header')
.css('color', 'blue');
});