jQuery osnovni filtri : Basic Filters

Primjer html koda u koji umećemo jQuery?

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.

Filtar prvi i posljednji - $(':first') i $(':last')

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

Web dizajn je za 5!!!

Parni i neparni filtri - $(':even') i $(':odd')

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

Filtar zadanog elementa $(':eq(indeks)'),

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

Filtar elementa indeksa većeg od - $(':gt(indeks)')

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

Filtar elementa indeksa manjeg od - $(':lt(indeks)')

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

Filtar elemenata izvan selekcije - $(':not(indeks)')

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

Filtar elementa naslova - $(':header')

Primjer filtra koji selektira sve elemente naslova od <h1> do <h6>.

$(function()
{
   $(':header')
     .css('color', 'blue');
});

jQueryvodič