13th febbraio 2009 by WebAir
jQuery tutorial
Oggi inauguriamo una serie di tutorial pensati per coloro che vogliono imparare ad utilizzare jQuery. Si tratta di tutorial utili per chi parte da zero o per chi già usa jQuery e vorrà aumentare ulteriormente le proprie conoscenze o magari trovare solo ciò che cerca (per la serie “come fare per”…).
Per cominciare, andate sul sito ufficiale di jQuery e nella sezione download scaricate la libreria di jQuery (ovvero, il file .js in cui sono contenuti tutti i metodi che ogunno di noi potrà usare): la versione di riferimento nel momento in cui scriviamo questo articolo è la 1.3.1 , scaricate la versione uncompressed. Per facilitarvi il compito, ecco il link diretto della pagina: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.js
Benissimo ora avete tutto il necessario per poter iniziare!
Aprite un qualsiasi editor con cui creare pagine html, inizialmente avremo il seguente codice:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”it” xml:lang=”it”>
<head>
<title>jQuery Tutorial – WebAir.it</title>
<meta name=”description” content=”jQuery Tutorial – per principianti e non” />
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
</head>
<body>
</body>
</html>
…ovvero una pagina vuota.
Adesso inseriamo 2 paragrafi con il classico testo lorem ipsum.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”it” xml:lang=”it”>
<head>
<title>jQuery Tutorial – WebAir.it</title>
<meta name=”description” content=”jQuery Tutorial – per principianti e non” />
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
</head>
<body>
<p id=”paragraph1″>
1st Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
2nd Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
Ora iniziamo ad usare jQuery, vedrete come sia possibile imprare le basi di jQuery tramite il codice che segue. Faremo in modo da tenere nascosto il primo paragrafo (paragraph1) e mostrare solo il secondo.
iniziamo con l’aggingere all’intenro dell’head il codice per richiamare la libreria che abbiamo scaricato poco fa (attenzione: specificate la direcory esatte all’interno dell’src).
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”it” xml:lang=”it”>
<head>
<title>jQuery Tutorial – WebAir.it</title>
<meta name=”description” content=”jQuery Tutorial – per principianti e non” />
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
<script type=”text/javascript” src=”jquery-1.3.1.js”></script>
</head>
<body>
<p id=”paragraph1″>
1st Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
2nd Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
ora iniziamo a scrivere le righe di codice che ci interessano di più:
<script type=”text/javascript”>
$(document).ready(function(){
$(’p#paragraph1′).hide();
});
</script>
quanto scritto sopra significa che quando il documento è pronto (document).ready il paragrafo con id paragraph1 non dovrà essere visualizzato (’p#paragraph1′).hide();
Ricordate che in jQuery sono molto importanti le parentesi, ogni blocco di istruzioni è racchiuso in parentesi tonde che a loro volta inglobano 2 parentesi graffe. Nel codice sopra c’è una parentesi tonda che inizia dopo ready e viene chiusa alla fine (seguita dal ; ) prima di </script>
Ogni metodo è seguito dalle parentesi tonde che in alcuni casi possono non contenere nulla (tecnicamente si dice che non contengono argomenti), in altri casi invece possono contenere alcuni parametri utili al funzionamento (lo vedremo tra un po’).
Adesso rendiamo operativo il codice:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”it” xml:lang=”it”>
<head>
<title>jQuery Tutorial – WebAir.it</title>
<meta name=”description” content=”jQuery Tutorial – per principianti e non” />
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
<script type=”text/javascript” src=”jquery-1.3.1.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(’p#paragraph1′).hide();
});
</script>
</head>
<body>
<p id=”paragraph1″>
1st Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
2nd Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
per evitare confusione abbiamo inserito 1st per il primo paragrafo e 2nd per il secondo, così potrete facilmente notare quale sia quello che verrà visualizzato nel browser.
Salvate e aprite la pagina nel browser. Noterete che viene visualizzato solo il secondo paragrafo.
Adesso, con la stessa ogica usata fin’ora, vediamo come poter visualizzare il primo paragrafo con un click.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”it” xml:lang=”it”>
<head>
<title>jQuery Tutorial – WebAir.it</title>
<meta name=”description” content=”jQuery Tutorial – per principianti e non” />
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
<script type=”text/javascript” src=”jquery-1.3.1.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(’p#paragraph1′).hide();
$(’a#paragraphAnchor’).click(function(){
$(’#paragraph1′).show();
});
});
</script>
</head>
<body>
<a href=”#” id=”paragraphAnchor”>click to show the paragraph</a>
<p id=”paragraph1″>
1st Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
2nd Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
abbiamo aggiunto un semplice tag <a> e gli abbiamo assegnato un id, questo ci permette di attivare la funzione desiderata solo su quel singolo link.
a questo punto dovrebbe esservi chiaro il significato delle linee di codice appena aggiunte
$(’a#paragraphAnchor’).click(function(){
$(’#paragraph1′).show();
});
la logica è sempre la stessa:
stiamo agendo sul tag a con id paragraphAnshor (’a#paragraphAnchor’) e vogliamo attivare una funzione che ci permette di cliccarci click(function() per poter visualizzare il primo paragrafo (’#paragraph1′).show();
per farlo abbiamo usato il metodo show(); senza nulla all’interno delle parentesi.
Salvate e testate.
Probabilmente avrete già capito quale sia il prossimo passo: visualizzare e nascondere il paragrafo con un click.
Eccovi accontentati:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”it” xml:lang=”it”>
<head>
<title>jQuery Tutorial – WebAir.it</title>
<meta name=”description” content=”jQuery Tutorial – per principianti e non” />
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
<script type=”text/javascript” src=”jquery-1.3.1.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(’p#paragraph1′).hide();
$(’a#paragraphAnchor’).click(function(){
$(’#paragraph1′).slideDown(’slow’);
$(’a#paragraphAnchor’).hide();
});
$(’a#closeParagraph’).click(function(){
$(’#paragraph1′).hide(’slow’);
$(’a#paragraphAnchor’).slideDown(’slow’);
});
});
</script>
</head>
<body>
<a href=”#” id=”paragraphAnchor”>click to show the paragraph</a>
<p id=”paragraph1″>
1st Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br />
<a href=”#” id=”closeParagraph”>click to close the paragraph</a>
</p>
<p>
2nd Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
Notate che abbiamo sostituito il metodo show() con slideDown(’slow’); Adesso provate a sostituire slideDown(’slow’); con slideDown(1000); e poi con slideDown(5000); noterete differenze interessanti e che potrete usare dipendentemente dalle esigenze che avrete.
Per vedere l’esempio > Demo
Finisce qui questo tutorial, speriamo sia stato facilmente comprensibile ed utile. Periodicamente pubblicheremo altri tutorial relativi a jQuery. Attendiamo vostri commenti o eventuali domande, di seguito un pò di link utili.
jquery.com il sito di riferimento per jQuery
docs.jquery.com/Main_Page per tutta la documentazione di jQuery
Correlated Articles
un tutorial per usare jQuery e ajax per select concatenate, inserimenti nel Db da select, cose del genere ? Potreste indicarne qualcuno (meglio se in italiano)
Complimenti per il tutorial, è davvero ottimo per chi deve apprendere le basi di jquery perché arriva subito al punto.
Volevo però segnalarti che nell’articolo il link per il download diretto punta alla versione 1.3 di jquery e non alla 1.3.1 che invece usi nel corso del tutorial.
Non ci sono differenze in questo caso comunque.
Ancora complimenti e buon lavoro.
direi che tutti quelli che vogliono imparare jQuery dovrebbero leggere questo tutorial per iniziare! davvero complimenti!
grazie a voi, speriamo che anche i prossimi tutorial possano suscitare lo stesso interesse e risultare utili per voi.
Se avete qualcosa di interessante, segnalatecela.
che dire? grazie e al prossimo articolo, intanto mi abbono al feed
>> un tutorial per usare jQuery e ajax per select concatenate, inserimenti nel Db da select, cose del genere ? Potreste indicarne qualcuno (meglio se in italiano)
Servirebbero maggiori informazioni, se per select concatenate intendi una dropdown che cambia valore in base a cosa selezioni in un altra dropdown il sistema è semplice.
Immaginiamo di avere un semplice html contenente 2 dropdown, una parte popolata, la seconda vuota:
<select id=”select1″>
<option>opzione 1</option>
<option>opzione 2</option>
<option>opzione 3</option>
<option>opzione 4</option>
<option>opzione 5</option>
<option>opzione 6</option>
</select>
<select id=”select2″>
</select>
A questo punto bindiamo una function all’evento onchange della prima select:
<script type=”text/javascript”>
$(”#select1″).change(function () {
$(”#select2″).load(”aggiorna.php”, { ‘valore’: $(this).value } );
});
</script>
questo semplice script invia alla pagina “aggiorna.php” il parametro ‘valore’ che indica l’opzione selezionata nella prima select, il codice html che verrà restituito sarà inserito all’interno della seconda select (ci aspettiamo che l’html sia una lista di option)
Per salvare i dati su un db devi comunque appoggiarti a un linguaggio esterno (ruby, php, .NET, ….)
ottimo tutorial, peccato per l’impostazione grafica che non evidenzia il codice importante e rende tutto uguale.
Un consiglio.. attenzione alle virgolette.. che NON sono doppi apici. (forse un problema di conversione di lyx?).
prova.script
$(document).ready(function(){
$(’p#paragraph1′).hide(); ————–>>MI DA ERRORE IN QUESTA RIGA MA NN CAPISCO PERCHè!!
mi sembra di ave fatto tutto giusto!!
}); mi sai aiutare?
ciaoo!!
prova.script
$(document).ready(function(){
$(’p#paragraph1′).hide();
});
l’errore è sparito ma conntinuo a vedere tutti e due i paragrafi!
tutorial molto interessante!! grazie adesso riesco a capirci di più su jquery
Ho imparato molto! Grazie!
Una sola pecca … difficile lettura.
Non si capisce dove finisce il testo e dove inizia il codice HTML.
Nel copia/incolla mi fa dei casini con gli apici singoli (dai post precedenti ho visto che non è successo solo a me).
Ho usato Chrome … ma non penso (credo) centri molto.
Adesso mi leggo gli altri post!
Bello! Sto cercando di imparare nuovi linguaggi per internet, e devo dire che questo breve tuttorial mi sta aiutando a rivalutare javascript…. penso che mettero nel mio bagaglio di conoscenze anche jQuery..conoscete altre librerie gratuite suigeneris da poter imparare e usare liberamente?
Conoscerei anche persone volenterose di aiutarmi a impare C# e ASP.NET… scambiamoci la e-mail per collaborare….
[...] basi di JQuery Guida a jQuery Imparare jQuery Introduzione a jQuery – Prima parte jQuery Tutorial – imparare ad usare jQuery da zero jQuery API: toggle() Simple Toggle with CSS & jQuerSimple Toggle with CSS & jQuery [...]
Hey! Excellent concept, but could this really function?
MARYLOUISE
Hi – very great site you have made. I enjoyed reading this posting. I did want to publish a remark to tell you that the design of this site is very aesthetically delightful. I used to be a graphic designer, now I am a copy editor for a merchandising firm. I have always enjoyed working with computing machines and am trying to learn code in my spare time (which there is never enough of lol).