Metodi di base

Nelle lezioni precedenti abbiamo visto come sia possibile "raccogliere" specifici elementi da un documento HTML attraverso il motore di selezione CSS.

Una volta definita la collezione di elementi sulla quale lavorare possiamo applicarvi i metodi jQuery necessari per manipolare un elemento, un attributo o raffinare ulteriormente la nostra selezione. In questa lezione vedremo alcuni metodi fondamentali per iniziare a lavorare con jQuery.

Dimensione della selezione

Anzitutto è possibile scoprire molto facilmente quanti elementi sono stati trovati dal motore di selezione richiamando il metodo .size() o addirittura la proprietà .length (tipica degli array), consigliata per la maggiore velocità di risposta:

$(#menu li).size();
$(#menu li).length;

Ciò che viene restituito è un numero che potremo utilizzare, per esempio, all'interno di strutture di controllo:

var liste = $("#menu li");
if (liste.length > 0 ) {
		// esegui del codice solo se ci sono elementi
} 

Estrazione e indice degli elementi

Una volta verificata la presenza di elementi all'interno dell'oggetto jQuery, potremmo voler lavorare direttamente su alcuni di essi richiamando il metodo .get() che restituirà una collezione di elementi che potremo elaborare con i metodi nativi di JavaScript o passare ad altre librerie. Così scrivere:

var liste = $("#menu li").get();

equivale al codice JavaScript:

var liste = document.getElementById("menu").getElementsByTagName("li");

Se tuttavia siamo interessati solo ad un particolare elemento possiamo richiamarlo indicando a .get() il suo indice, in questo caso sarà restituito un riferimento diretto all'elemento del DOM:

var liste = $("#menu li").get(0); //solo il primo elemento della lista

Un metodo molto simile a questo è .eq(), che tuttavia restituisce sempre un oggetto jQuery, dandoci la possibilità di applicare su uno specifico elemento altri metodi jQuery:

// due modi per determinare l'html contenuto in un elemento lista

var html = $("#menu li").get(0).innerHTML; // con JavaScript nativo
var html = $("#menu li").eq(0).html(); // con metodo jQuery

Va precisato che dalla versione 1.3 jQuery raccoglie gli elementi secondo l'ordine indicato nel selettore CSS e non secondo la loro posizione nel documento:

<h1></h1>
<h1></h1>
<p></p>

<h2></h2>

<p></p>

$("h1,h2,p"); //ordine elementi: <h1>,<h1>,<h2>,<p>,<p>

Sempre legato alla posizione di un elemento è il metodo .index(), che ritorna l'indice di un elemento rispetto a quelli selezionati. Questo motodo accetta come argomento il riferimento ad un elemento del DOM:

<ul id="menu">
   <li id="primo">primo</li>
   <li>secondo</li>
</ul>

$("#menu li").index(document.getElementById("primo")); // ritorna 0

Nel caso fosse passato un oggetto jQuery verrà preso in considerazione solo in primo elemento collezionato, quindi l'esempio precedente potrebbe essere:

$("#menu li").index( $("#primo") ); // ritorna 0

Ciclare gli elementi

Un metodo che risulta spesso molto utile è .each(), che permette di applicare una funzione specifica su ogni elemento della collezione:

$("#menu li").each(function () {
     var id = this.id; 
});

All'interno della funzione passata ad .each(), this rappresenta l'elemento specifico. In alternativa possiamo definire due argomenti per rappresentare l'elemento ed il suo indice nella collezione. Attenzione: a differenza di altre librerie il primo argomento è l'indice:

$("#menu li").each(function (i,el) {
	var index = i; //0,1,2 etc
  var id = el.id; // l'id dell'elemento
});

Come detto in precedenza (ma non è mai troppo per chi si avvicina a jQuery) per utilizzare i metodi jQuery è necessario passare da $, anche all'interno di funzioni come queste:

$("#menu li").each(function (i,el) {
  var index = i; //0,1,2 etc
  var id = $(el).attr("id"); // l'id dell'elemento con jQuery
});

Ecco una pagina di esempio per i metodi .index() e .each()

In realtà, come vedremo più avanti, molti dei metodi jQuery possono essere passati direttamente alla collezione.