WebAir | web. for passion » jQuery Tutorial – imparare ad usare jQuery da zero

jQuery Tutorial – imparare ad usare jQuery da zero

Posted by WebAir Srl, In Tutorial

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.

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

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

</body>
</html>

ora iniziamo a scrivere le righe di codice che ci interessano di più:

$(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:

$('p#paragraph1').hide();

});
</script>

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

$('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>

</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:

$('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>

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

jQuery Tutorial - imparare ad usare jQuery da zero

jQuery Tutorial – imparare ad usare jQuery da zero