buzzoole code

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.

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.

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.

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:

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

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.

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:

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

Questo Blog è Indipendente e Supportato Solamente dai suoi Lettori.
Se vuoi sostenerlo, Condivi il Post sui Social Network:
Aggiungi il nostro sito alla Whitelist di Adblock Plus
e magari Fai Anche un Acquisto su Amazon partendo da Qui
(a te non costa nulla!).