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
[...] Dolhem Martin Donnelly Carlo Abate George Abecassis Kenny Acheson Andrea de Adamich Philippe Adams Walt Ader Kurt Adolff Posts Related to Smartphones and tablets to get MicroUSB 3.0 ports, just in time for [...]
Hi!…
I enjoy reading this weblog so considerably, saved to my bookmarks….
Likewise, Let me add, it is really not very often to check out posts which have been completely proofread, and so good job okay.
you’ve got a fantastic blog here! would you like to make some invite posts on my blog?
The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important.
It?s truly a great and useful piece of info. I am glad that you just shared this useful tidbit with us. Please stay us up to date like this. Thanks for sharing.
Hello There. I found your blog using msn. This is a really well written article. I will make sure to bookmark it and come back to read more of your useful info. Thanks for the post. I’ll certainly comeback.
I loved as much as you’ll receive carried out right here. The sketch is tasteful, your authored subject matter stylish. nonetheless, you command get bought an shakiness over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this increase.
Wonderful goods from you, man. I’ve understand your stuff previous to and you’re just too wonderful. I really like what you have acquired here, certainly like what you are stating and the way in which you say it. You make it enjoyable and you still take care of to keep it smart. I cant wait to read far more from you. This is actually a tremendous website.
Thank you for your entire effort on this website. Kate really loves doing investigations and it’s easy to see why. Many of us learn all concerning the compelling ways you produce both interesting and useful tips and hints via your blog and even boost participation from visitors on this topic while our favorite simple princess is now discovering so much. Take pleasure in the rest of the new year. Your conducting a fabulous job.
Magnificent goods from you, man. I’ve understand your stuff previous to and you’re just too magnificent. I actually like what you have acquired here, really like what you’re stating and the way in which you say it. You make it entertaining and you still care for to keep it sensible. I can’t wait to read far more from you. This is actually a great web site.
I’m still learning from you, as I’m improving myself. I certainly liked reading everything that is posted on your website.Keep the aarticles coming. I liked it!
I think this is among the most important information for me. And i am glad reading your article. But should remark on some general things, The site style is ideal, the articles is really nice : D. Good job, cheers
I’m commenting to make you understand of the fantastic discovery my girl undergone reading your blog. She learned a lot of issues, which include what it is like to possess an amazing helping character to have the mediocre ones easily have an understanding of certain multifaceted issues. You actually exceeded our own expectations. Thank you for presenting the essential, healthy, informative and even unique tips on that topic to Ethel.
hey there and thank you for your information – I have definitely picked up something new from right here. I did however expertise some technical points using this website, as I experienced to reload the site lots of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I’m complaining, but sluggish loading instances times will very frequently affect your placement in google and can damage your high quality score if advertising and marketing with Adwords. Anyway I am adding this RSS to my email and could look out for much more of your respective exciting content. Make sure you update this again soon..
It is appropriate time to make some plans for the future and it is time to be happy. I have read this post and if I could I desire to suggest you few interesting things or suggestions. Maybe you could write next articles referring to this article. I want to read more things about it!
Very efficiently written article. It will be helpful to anyone who employess it, as well as myself. Keep doing what you are doing – can’r wait to read more posts.
I precisely desired to say thanks again. I am not sure the things that I would’ve gone through in the absence of those smart ideas provided by you relating to such concern. It has been a frightful scenario for me personally, however , seeing a well-written strategy you managed the issue took me to weep with fulfillment. Extremely happier for the support and trust you know what an amazing job you were carrying out training men and women by way of your website. Most probably you’ve never got to know all of us.
Hello.This article was really fascinating, particularly since I was looking for thoughts on this subject last Monday.
hi, your website has really helped in certain areas of interest. I would like to thank you for your brilliant effort. keep up the good work.
» jQuery Tutorial – imparare ad usare jQuery da zero WebAir Blog I was recommended this web site by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are amazing! Thanks! your article about » jQuery Tutorial – imparare ad usare jQuery da zero WebAir BlogBest Regards Lawrence
Shoes Men Adidas Originals…
Pretty practical post. I just stumbled upon your home page and wanted to say in order that I have precisely enjoyed understanding your blog posts. Any way I’ll be subscribing in order to your feed and I hope you post anew soon….