jquery

Guida introduttiva a jQuery

1 Flares 1 Flares ×
FacebookTwitterGoogle+tumblrLinkedIn

Come molti di voi sapranno jQuery è una libreria di funzioni (framework) javascript, cross-browser per le applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML.
Tramite l’uso della libreria jQuery è possibile, con poche righe di codice, effettuare svariate operazioni, come ad esempio ottenere l’altezza di un elemento, o farlo scomparire con effetto dissolvenza.

Vediamo allora come funziona attraverso questa guida introduttiva!
Prima di tutto vediamo i selettori: per selezionare degli elementi nel documento sarà sufficiente identificarli attraverso un selettore CSS (lo stesso che usereste in un foglio di stile) e passare la stringa alla funzione $:

$("ul#menu li") // abbiamo selezionato tutti gli elementi della lista "menu"

Selettori di base

Per prima cosa potete utilizzare selettori semplici (tutte le combinazioni di tag, classi e id):

$("a"); //tutti i link nel documento
$("#blocco"); //seleziona un singolo elemento con id "blocco"
$("a.external"); //solo i link con classe "external"

Come in una regola di un foglio di stile CSS, possiamo indicare più selettori contemporaneamente:

$("#blocco,a.external");

Infine è possibile selezionare tutti gli elementi di un documento:

$("*");

In quest’ultimo caso, ricordiamo sempre che maggiore sarà la precisione con cui identificheremo gli elementi che ci servono, maggiore sarà la velocità con cui jQuery li raccoglierà ma soprattutto minore sarà il peso dello script per il browser.

Metodi di base

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.

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
}

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
});
 
FacebookTwitterGoogle+tumblrLinkedIn

Lascia un Commento

L'indirizzo email non verrà pubblicato.

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

1 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 LinkedIn 1 1 Flares ×