Introduzione a jQuery: qualche esempio

Pubblicato il 26/06/2008 da Matteo Moro in jquery, strumenti, tutorial

jQuery Logo
Da qualche giorno, ho iniziato a parlare di tecniche basate su jQuery. Che cos’è jQuery? E’ una libreria Javascript leggera, per creare applicazioni web lato client. E’ possibile manipolare in modo semplice il DOM e aggiungere effetti grafici, ed è ampliabile attraverso un sistema di plugin.

Luke Dingle, su TheWebSqueeze.com, ha presentato le possibilità offerte da jQuery attraverso una serie di esempi semplici e pratici che riassumerò in questo articolo.

Perchè jQuery?

Innanzitutto, c’è da chiedersi perchè utilizzare una libreria anzichè scriversi il codice da soli: avere le conoscenze adeguate e considerare queste librerie un inutile overhead possono sembrare buoni motivi, in realtà sono dettati più dall’orgoglio che dalla logica. E’ inutile inventare continuamente la ruota per le attività di tutti i giorni, quando ci sono ruote già esistenti che funzionano piuttosto bene. L’uso di librerie aiuta a concentrarsi sul problema da risolvere più che sulle questioni di contorno.

Detto questo, c’è da scegliere una libreria tra le molte disponibili. Prototype, Scriptaculous e Moo Tools sono solo alcuni degli strumenti a disposizione: perchè proprio jQuery? Luke l’ha scelto per alcuni motivi ben precisi, legati alle sue necessità:

Leggerezza: jQuery pesa solo 16KiB (compresso)
Supporto DOM: jQuery mette a disposizione molte funzioni per navigare comodamente all’interno del DOM di una pagina
Evitare conflitti di namespace: jQuery basa tutto sulla variabile $, eventualmente rinominabile
Semplicità: jQuery è un linguaggio completamente nuovo solo se non si conosce l’inglese

Esempi di codice jQuery

Dopo le spiegazioni sui motivi della suq scelta, Luke passa a tre semplici esempi, che mostrano quanto sia semplice il codice jQuery rispetto al tradizionale Javascript.

Visualizzare e nascondere oggetti:
[source:JScript]
$(document).ready(function()
{
$(‘#boxA’).click(function(){ $(‘#boxB’).toggle(‘medium’);});
});
[/source]

Selezionare e manipolare una classe di oggetti:
[source:JScript]
$(‘.testClass’).mouseover(function () { alert(‘bar’);});
[/source]

Navigare il DOM e creare nuovi oggetti:

[source:JScript]
$(‘body’).html(‘

This is H1 text

This is strong this is more text

This is text for the second paragraph

‘);

[/source]

Eseguire chiamate AJAX:
[source:JScript]
$.ajax({
type: “GET”,
url: “time.asp”,
dataType: “text”,
success : function (text)
{ alert(text); },
failure : function (text) { alert(‘That was all wrong, wrong!!’); }
});

[/source]

Approfondimenti

Per approfondire l’argomento, e confrontare questi esempi di codice con il loro equivalente in Javascript “tradizionale”, potete leggere l’articolo di Luke Dingle. Sul sito ufficiale di jQuery, inoltre, si trova un sacco di documentazione utile sia per i principianti che per colori che hanno più esperienza con la libreria.

Commenti

3 commenti per “Introduzione a jQuery: qualche esempio”

ZicZac.it, clicca qui e vota questo articolo! il 26/06/2008 08:39

Questo articolo è stato segnalato su ZicZac.it….

Che cos’è jQuery? E’ una libreria Javascript leggera, per creare applicazioni web lato client. E’ possibile manipolare in modo semplice il DOM e aggiungere effetti grafici, ed è ampliabile attraverso un sistema di plugin….
upnews.it il 26/06/2008 08:39

Introduzione a jQuery: qualche esempio…

Che cos’è jQuery? E’ una libreria Javascript leggera, per creare applicazioni web lato client. E’ possibile manipolare in modo semplice il DOM e aggiungere effetti grafici, ed è ampliabile attraverso un sistema di plugin. Luke Dingle, su TheWeb…
diggita.it il 26/06/2008 08:40

Introduzione a jQuery: qualche esempio…

Che cos’è jQuery? E’ una libreria Javascript leggera, per creare applicazioni web lato client. E’ possibile manipolare in modo semplice il DOM e aggiungere effetti grafici, ed è ampliabile attraverso un sistema di plugin. Luke Dingle, su TheWeb…