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!