FONTE: webstandard.kulando.de (parte 1 e parte 2)

FONTE: dynamicdrive.com

FONTE: Dynamick.it

FONTE: kilianvalkhof.com

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(‘

‘);

[/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.

Da molti anni esistono tecniche di preload delle immagini, che non fanno altro che caricare tutte le immagini presenti in una pagina prima di renderla disponibile alla visualizzazione. Questo semplice esempio, realizzato da FilamentGroup con l’ausilio di jQuery, non fa altro che scorrere la pagina corrente alla ricerca dei fogli di stile esterni, per poi analizzarli e caricare tutte le immagini utilizzate: in questo modo, nel momento in cui è richiesto un effetto grafico, le immagini necessarie saranno già nella cache dell’utente e la visualizzazione risulterà molto più reattiva.

[source:JScript]
jQuery.preloadCssImages = function(){
var allImgs = [];
var k = 0;
var sheets = document.styleSheets;

for(var i = 0; i<sheets .length; i++){
var cssPile = ”;
var csshref = (sheets[i].href) ? sheets[i].href : ‘window.location.href’;
var baseURLarr = csshref.split(‘/’);
baseURLarr.pop();
var baseURL = baseURLarr.join(‘/’);
if(baseURL!=”") baseURL+=’/';
if(document.styleSheets[i].cssRules){
var thisSheetRules = document.styleSheets[i].cssRules;
for(var j = 0; j0 && imgUrls != ”){
var arr = jQuery.makeArray(imgUrls);
jQuery(arr).each(function(){
allImgs[k] = new Image();
allImgs[k].src = (this[0] == ‘/’ || this.match(‘http://’)) ? this : baseURL + this;
k++;
});
}
}
return allImgs;
}
[/source]

Approfondimenti:

• A New & Improved jQuery Script to Automatically Preload images from CSS

Pagina da cui estrarre i dati:

<ul>
<li>My Favorite Movies</li>
<li>Contact</li>
<li>Shawshank Redemption</li>
<li>Napoleon Dynamite</li>
<li>Back To The Future</li>
<li>The Goonies</li>
<li>Cinderella Man</li>
<li>Apollo 13</li>
</ul>

Pagina in cui inserire i dati:

<div id="container">
 <a href="#" id="loadData">
 Click This Link To Load My Favorite Movies</a>
</div>

Codice jQuery necessario:

$(document).ready(function()
 {
  $("#loadData").click(function()
   {
    $(this).text("...One Moment Please...");
     $("#container").append('<div id="favoriteMovies">
                             </div>')
                    .children("#favoriteMovies").hide()
                    .load("theOtherPage.htm ul#favoriteMovies",
                           function()
                     {
                      $("#loadData").remove();
                      $("#favoriteMovies").slideDown("slow");
                     });
   return false;
   });
});

Appena il documento è stato completamente caricato, si andrà a definire una funzione sull’evento click() dell’elemento con ID “loadData”. La funzione, per prima cosa, modifica il testo del link per indicare all’utente che stiamo caricando i dati richiesti. A questo punto, crea un <div> all’interno dell’elemento “container” e lo nasconde, in attesa di aver caricato i dati.

Il metodo Load()

Una volta creata la struttura necessaria per i dati da caricare, entra in gioco la funzione Load(): i parametri da passare sono la pagina da cui estrarre i dati, l’ID dell’elemento desiderato e una funzione di callback, che verrà eseguita a caricamento completato.

Quest’ultima funzione si occuperà di rimuovere il link iniziale e visualizzare il <div> creato in precedenza, che a questo punto contiene i dati desiderati.

Approfondimenti:

• Demo
• Scarica il codice
• Articolo originale: “Load Data From Other Pages With jQuery“