Guida a jQuery: i Filtri Base


jQuey logo scrivi meno e fai di più

Filtri jQuery

Oggi vediamo una delle funzioni più basilari che offre la libreria Java script jQuery, cioè i filtri. Sostanzialmente abbiamo sei tipologie di filtri diverse:

  • Basic: Forniscono la selezione del primo elemento o dell’ultimo, di quelli dispari o pari,
  • Content: questa tipologia di filtri consente di selezionare gli elementi che contengono una particolare stringa,
  • Visibility: si tratta di un set che permette di filtrare gli elementi visibili o invisibili,
  • Attribute,
  • Child: filtra gli elementi in base alla loro relazione con elementi genitore,
  • Form: si tratta di una serie di filtri specializzati nell’operare sui form.

Nell’articolo di oggi, vedremo i filtri di tipo Basic, nelle lezioni che seguiranno vedremo le altre tipologie di filtro che offre jQuery.

Filtri jQuery di tipo basic

:first il primo elemento di un dato set
:last viceversa del precedente,seleziona l’ultimo elemento.
:even seleziona gli elementi pari.
:odd seleziona gli elementi dispari.
:eq(n) seleziona l’elemento indicato da n
:gt(n) seleziona gli elementi successivi all’indice specificato n
:lt(n) al contrario del precedente, seleziona gli elementi precedenti l’indice specificato n
:header seleziona tutti i titoli come H1,H2…
:animated seleziona gli elementi che in qualche modo sono “animati”. Questa proprietà viene utilizzata insieme alla capacità di jQuery di riuscire ad animare elementi tradizionalmente statici.
:not(selector) seleziona gli elementi che non soddisfano la selezione specificata tra parentesi.

andiamo a vedere quindi qualche esempio. Innanzitutto dobbiamo sistemare la sezione head della nostra pagina html: occorre importare la libreria principale di jQuery, e quindi utilizzare attraverso un nostro piccolo script le funzioni che mette a disposizione.

	<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//Qui vanno scritte le funzioni che ci interessano.
});
</script>
<style type="text/css">
.a { color: #CCC; }
.b { color: Maroon; }
</style>
</head>

All’interno della sezione head è anche esplicitamente inserito un piccolo foglio stile con due classi a e b.
All’interno della sezione body avremo invece i nostri elementi, in questo caso una lista, e dei paragrafi.


<body>
<ul id="lista">
<li class="a">Elemento 1</li>
<li class="a">Elemento 2</li>
<li class="b">Elemento 3</li>
<li class="b">Elemento 4</li>
</ul>

<p class="a">Paragrafo 1</p>
<p id="para1">Paragrafo 2</p>
<p class="b">Paragrafo 3</p>
<p id="para4" lang="it-it">Paragrafo 4</p>
</body>

all’interno dello script presente nella pagina, scriveremo le funzioni e ne vedremo i risultati.
Nel primo esempio andremo a vedere il filtro first e last.

 $("p:first").css("border","3px solid black");
$("p:last").css("border","3px solid red");

Il risultato sarà che il primo elemento paragrafo che jQuery trova all’interno del documento, selezionato con p:first sarà decorato da un bordo spesso tre pixel, di tipo solid e nero, mentre l’ultimo elemento verrà selezionato per mezzo del filtro p:last ed avrà un bordo rosso.

Possiamo selezionare anche in base alla classe degli elementi, allo stesso modo di come facevamo nell’esempio precedente:

  $(".a:first").css("border","3px solid black");
  $(".b:last").css("border","3px solid red");

Vediamo adesso i selettori odd, per gli elementi dispari, ed even per gli elementi pari:

 $("p:odd").css("border","3px solid black");
 $("p:even").css("border","3px solid red");

Guardando il risultato sullo browser potrebbe tornarci qualcosa di strano, ma ciò è dovuto al fatto che jQuery conta gli elementi all’interno della pagina partendo dallo zero, quindi quello che noi ci aspetteremmo come elemento numero uno è in realtà per jQuery il numero zero e viene considerato pari.

Se invece intendiamo selezionare tutti gli elementi che hanno un indice maggiore di una certa quantità, dobbiamo utilizzare il filtro :gt(n).
Nell’esempio che segue andremo selezionare gli elementi di tipo paragrafo che hanno indice maggiore di uno.

  $("p:gt(1)").css("border", "3px solid black");

adesso andiamo a provare l’operatore di negazione :not(espressione).nell’esempio che segue andremo selezionare tutti gli elementi che sono di tipo paragrafo, e il cui indice è diverso da due:

   $("p:not(p:eq(2))").css("border", "3px solid black");

per quello che riguarda i filtri di tipo base è tutto!


Lascia un Commento!