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 filtra je ograničavanje skupinu odabranih elemenata na one koje odgovaraju selektoru.
Primjer osnovnog filtra koji selektira prvi element popisa:
$(function()
{
$('p:first')
.css('color', 'blue');
});
Objašnjenje: Budući da je selektiramo samo prvi element popisa ostali ostaju nepromijenjeni.
Prvi odlomak
Drugi odlomak
Treći odlomak
Četvrti odlomak
Peti odlomak
Primjer osnovnog filtra koji selektira posljednji element popisa:
$(function()
{
$('p:last')
.css('color', 'blue');
});
Objašnjenje: Budući da je selektiramo samo posljednji element popisa ostali ostaju nepromijenjeni.
Prvi odlomak
Drugi odlomak
Treći odlomak
Četvrti odlomak
Peti odlomak
Primjer osnovnog filtra 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 filtra 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 filtra koji selektira treći element popisa čija je 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 filtra 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 pregledniku:
Prvi odlomak
Drugi odlomak
Treći odlomak
Četvrti odlomak
Peti odlomak
Primjer osnovnog filtra 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 filtra 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 filtra koji selektira sve elemente naslova od <h1> do <h6>.
$(function()
{
$(':header')
.css('color', 'blue');
});