Filtrare in base agli attributi specificati con jQuery

Nella lezione precedente abbiamo visto i filtri che possono essere utilizzati con jQuery di livello base.
Oggi andremo a vedere un’altra tipologia di filtri, i quali possono essere utilizzati in base agli attributi del contenuto della pagina web che andiamo a sviluppare.
Non lasciatevi impaurire dalla tabella qui sotto, quando sarete arrivati in fondo alla pagina, tutto sarà molto più chiaro.

Filtro	Tipologia d’uso
[attributo]	vengono presi tutti quegli elementi che hanno l’attributo specificato.
[attributo=valore]	sono inclusi quegli elementi che hanno un determinato attributo, il quale ha un certo valore specificato.
[attributo!=valore]	si tratta della versione negata delle filtro precedente: vengono presi tutti quegli elementi che hanno un determinato attributo, ed il cui valore è diverso da quello specificato.
[attributo^=valore]	vengono selezionati in questo caso tutti quegli elementi che hanno l’attributo specificato che inizia per il valore inserito.
[attributo$=valore]	in questo caso vengono selezionati quegli elementi in cui l’attributo termina per il valore specificato.
[attributo*=valore]	in questo caso sono invece specificati gli elementi che hanno determinato attributo e che hanno un valore specificato.
[attrFilter1][attrFilterN]	Sono inclusi gli elementi che corrispondono all’attributo specificato.

Se tutto ciò non è chiaro, gli esempi saranno sicuramente in grado di farvi capire come questi filtri lavorano.

Andiamo a vedere quindi un po’ di codice: ecco il solito header, che è lo stesso che abbiamo iniziato anche alla scorsa lezione.

Il corpo, esattamente come la testata rimane lo stesso.

</pre>
<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>
<pre>

Paragrafo 1
Paragrafo 2
Paragrafo 3
Paragrafo 4

Nel primo esempio supponiamo che vogliamo selezionare soltanto gli elementi di tipo paragrafo che hanno una classe.
Andremo a scrivere quindi:

  $("p[class]").css("border","3px solid black");

in questo caso quindi selezioneremo il paragrafo “Paragrafo 1” e “Paragrafo 3”.
Potremmo pensare di selezionare gli elementi anche in base al loro id. nell’esempio che segue vedremo come selezionare un id particolare specificato, ed una selezione più larga, in cui selezioneremo gli elementi di tipo paragrafo il cui id inizia in un certo modo. Il codice da scrivere è il seguente:

  $("p[id=para1]").css("border","3px solid black");
 $("p[id^=para]").css("border","3px solid black");

in questo caso vi consiglio di provare un codice alla volta, visto che la seconda selezione andrebbe a prendere anche quanto selezionato dalla prima.
andiamo a trovare adesso un ultimo esempio, nel quale potremo utilizzare attributi multipli.

$("p[id^=para][lang*=en-]").css("border","3px solid black");

La selezioni in questione andrà a prendere gli elementi con id che inizia per “para” e che hanno un attributo di tipo “lang” con una stringa del genere “it-“.
come vedete utilizzare jQuery è piuttosto semplice, e il motto “Write less and do more” è rispettato!