Quasi tutte le lezioni precedenti hanno avuto come scopo quello di poter selezionare, in jQuery e con i vari filtri del caso, un elemento della pagina (o meglio del DOM).
Ora, direi, é il caso di capire e conoscere quali sono i metodi di base che jQuery ci mette a disposizione per manipolare un elemento o un attributo. In questo articolo, mi limito ad elencarvi (con qualche riga di esempio) i metodi più importanti ed utilizzati su jQuery anche se i metodi messi a disposizione, come potete ben intuire, son moltissimi e adatti alle più disparate esigenze.
Dimensione di una selezione
Possiamo conoscere velocemente quanti elementi sono stati trovati tramite una selezione sfruttando sia il metodo size() oppure tramite la proprietà length() (classica degli array) :
<ul id=”menu”>
<li id=”mela”>Mela</li>
<li id=”arancio”>Arancio</li>
<li>Mango</li>
<li>Banana</li>
</ul>
var size1 = $(“li”).size();
var size2 = $(“li”).length;
ed utilizzarla, ad esempio, per eseguire del codice solo se la selezione ha dato come risultato un certo numero di elementi :
if (size2 > 2 ) {
// eseguire questo codice solo se ci più di due elementi
}
Estrazione di elementi
Dopo aver selezionato alcuni elementi, potremmo voler lavorare direttamente solo su alcuni di essi. Tra i metodi che potrebbero interessarci, di sicuro, il più interessante é il metodo get() che fornisce una collezione di elementi su cui possiamo agire come desideriamo :
var lista = $(“#menu li”).get();
Qualora, invece, fossimo interessati solo ad uno specifico elemento, occorre solo passare al metodo get() uno specifico indice per selezionare un particolare elemento del DOM:
var lista = $(“#menu li”).get(0); //solo il primo elemento della lista, cioè Mela
Restando in tema di elementi e posizioni, vi indico il metodo index() capace di restituire l’indice di un elemento rispetto a quelli selezionati. Logicamente, in tal caso, occorre specificare il riferimento preciso ad un elemento del DOM:
$(“#menu li”).index( $(“#arancio”) ); // ritorna 1 iniziando a contare da 0 (elemento Mela)
Ciclare gli elementi
Come nella stragrande maggioranza dei linguaggi, anche in jQuery risulta utilissimo conoscere il metodo che consente di ciclare gli elementi.
In jQuery, non potete fare a meno di usare each(), che consente, appunto, di applicare metodi e funzioni specifiche su ogni elemento della collezione :
$(“#menu li”).each(function () {
var id = this.id;
});
Noterete che nella sintassi compare anche this che rappresenta l’elemento specifico.
Aggiungere o rimuovere classi agli elementi selezionati
Un metodo che ci servirà in molte occasioni é a mio avviso quello che sto per presentarvi. Si chiama toggleClass(class, switch) ed aggiunge una classe all’elemento selezionato, se questo già non l’ha assegnata, altrimenti la rimuove.
La sintassi prevede un argomento obbligatorio, class, che rappresenta la classe che deve essere aggiunta oppure tolta e uno facoltativo, ovvero switch, che se valorizzato a TRUE aggiunge sempre la classe, nel caso di FALSE la rimuove sempre.
L’esempio é presto fatto soprattutto se avete seguito anche le lezioni precedenti di questo tutorial. Infatti, riprendendo l’articolo che trattava del metodo toggle, possiamo migliorare decisamente la parte di codice jQuery.
Quindi, prendendo la parte di codice jQuery dell’esempio relativo al metodo toggle :
$(document).ready(function(){
$("#ITCitta").toggle(function() {
$("#cittait").addClass("nascondi");
},
function() {
$("#cittait").removeClass("nascondi");
});
$("#STCitta").toggle(function() {
$("#cittast").addClass("nascondi");
},
function() {
$("#cittast").removeClass("nascondi");
});
});
questa, sfruttando toggleClass() diventerà, banalmente :
$(document).ready(function(){
$("#ITCitta").click(function() {
$("#cittait").toggleClass("nascondi");
});
$("#STCitta").click(function() {
$("#cittast").toggleClass("nascondi");
});
});
L’effetto che potete verificare qui resterà il medesimo poiché, come detto, il toggleClass aggiunge la classe ‘nascondi’ all’elemento selezionato, se questo già non l’ha assegnata, altrimenti la rimuove.
Nella prossima lezione, interrompiamo per un attimo la sequenza di argomenti e proporremo qualche primo esempietto simpatico e utile basandoci sui temi trattati finora.
