La funzione jQuery()

La funzione principale utilizzata in jQuery è, neanche a dirlo, jQuery(). Per non smentire quanto enunciato dal motto stesso del framework riguardo alla sinteticità delle funzioni, è presente un suo alias: $() (il simbolo del dollaro è stato scelto per mantenere una certa uniformità con il framework Prototype).

Le due funzioni si equivalgono e per semplicità d’ora in poi nei nostri esempi utilizzeremo sempre $(), piuttosto che l’espressione estesa. Vediamo un esempio:

var a = jQuery("a"); //seleziono tutti i link tramite la funzione jQuery()
var b = $("a"); // seleziono tutti i link tramite la funzione $()

In questa lezione introduttiva vedremo una semplice panoramica sulle potenzialità del framework: vedremo innanzitutto come selezionare un elemento del DOM (nell’esempio visto sopra abbiamo già visto come farlo attraverso il TagName) e come applicarvi uno o più metodi al fine di manipolarne l’aspetto o la funzionalità.

Selezionare un elemento della pagina

Come dicevamo jQuery permette di ridurre sensibilmente il codice scritto. Una delle necessità più frequenti per i programmatori Javascript consiste nel recuperare un elemento all’interno del DOM. L’ipotesi più semplice prevede che ciò avvenga mediante un identificatore univoco (attributo ID). Vediamo come avverrebbe questo con Javascript e confrontiamolo con jQuery:

document.getElementById("id_ele"); //selezione elemento con javascript puro
$("#id_ele"); //stessa cosa con jQuery

Come vedete il codice che si è dovuto scrivere si è ridotto sensibilmente.

Come vedremo nelle lezioni seguenti, inoltre, la selezione di elementi mediante jQuery è estremamente potente e consente di effettuare, in modo semplicissimo, operazioni di selezione elementi che con Javascript richiederebbero righe e righe di codice: se, infatti, la selezione di un elemento tramite ID è pouttosto semplice anche in Javascript "puro", altrettanto non può dirsi della selezione di elementi medianti classi, attributi e stati CSS.

Una delle caratteristiche fondamentali di jQuery, infatti, è l’estrema semplicità attraverso la quale è possibile selezionare un elemento del DOM semplicemente passando alla funzione jQuery() un selettore CSS: come avremo modo di vedere, il motore di selezione integrato in jQuery è una delle faeture più importanti del framework.

Concatenare il codice

Un altro punto a favore di questo framework è la possibilità di concatenare codice (cd. esecuzione a catena), funzionalità permessa dal fatto che quasi tutte i metodi utilizzati da jQuery ritornano l’oggetto dal quale sono stati chiamati. Oltre che alla riduzione di righe scritte, questo comporta anche una migliore lettura del codice scritto, cosa di non poca rilevanza se chi legge non è chi ha scritto il sorgente.

La concatenazione può essere effettuata mediante il punto (.) e mettendo il punto e virgola (;) solamente al metodo finale. Facciamo un esempio: proviamo a selezionare un link tramite il suo ID ed effettuiamo un po’ di operazioni concatenando diversi metodi.

$("a#id_link")
.css("color","red")
.bind("click", funzione_evento_click)
.show("1200");

Che dire? jQuery è molto più sintetico e fa risparmiare parecchio codice e tempo. Non siete ancora convinti? provate a fare tutto questo in puro Javascript…

Aggiungere elementi al DOM

Un’altra interessante funzionalità offerta da jQuery è quella di poter aggiungere con facilità degli elementi al DOM.

Abbiamo detto che lo scopo della funzione jQuery() è quella di fungere da strumento di selezione e che tale operazione avviene mediante l’indicazione di un selettore CSS. In realtà è possibile "passare" alla funzione jQuery() anche del codice HTML al fine di creare "al volo" nuovi elementi del DOM. Come al solito vediamo un esempio chiarificatore:

var blocco_da_inserire = $("<div><p>Mr Webmaster</p></div>");

Per aggiungere l’elemento appena creato alla nostra pagina sarà sufficiente "appenderlo" nel punto desiderato mediante il metodo appendTo:

blocco_da_inserire.appendTo("#contenitore");

così facendo andremo ad aggiungere, all’interno dell’elemento con ID "contenitore" il markup HTML specificato all’interno della funzione jQuery().

Passare una funzione di callback al completamento del caricamento del DOM

La funzione jQuery(), infine, può essere utilizzata per passare una funzione di callback da eseguirsi al completamento del DOM.

In pratica jQuery() può essere utilizzata come sostitutivo di $(document).ready() per intercettare il completamento del DOM e per attivare una serie di azioni che dipendono da quest’ultimo. Vediamo un esempio:

$(function() {
  // codice da eseguire quando il caricamento del DOM
  // è stato completato
});

il codice qui sopra, come anticipato, è equivalente a:

$( document ).ready(function() {
  // ...
  // ...
});

Ovviamente quanto spiegato in questa lezione non vuole essere niente di più che un esempio delle potenzialità della libreria: vedremo nelle lezioni successive di approfondire adeguatamente i vari aspetti e le varie funzionalità offerti da jQuery.