Iniziare con jQuery: le basi indispensabili

In questo articolo scopriremo le basi indispensabili del jQuery partendo da zero. Da leggere assolutamente nel caso non sappiate da che parte cominciare!

Iniziamo! Che cos’è jQuery?

jQuery viene definito come framework di sviluppo javascript. Questo significa che jQuery si appoggia e usa il linguaggio javascript, usato fin dall’alba dei tempi nel web, ma lo potenzia, rendendolo più snello, semplice e immediato. Oltre a questo aggiunge molte funzionalità “già pronte” all’uso, indispensabili per restare al passo con le nuove tecnologie e rendendo il tutto più user-friendly.

Lo slogan del jQuery e’ molto chiaro: Write less, do more! che letteralmente significa: Scrivi meno, fai di più!. Questo perchè  codice javascript è molto prolisso e complicato, e si rende parecchio ostico un pò a tutti. Oltre a questo richiede molte ( e credetemi !) righe di codice, anche per le animazioni più comuni e semplici. Tutto il contrario con JQuery il codice risulta più sintetico, semplice e immediato.

Cosa fare per iniziare a programmare con jQuery?

Le basi indispensabili da conoscere sono principalmente html e CSS. Non vi e’ una necessità di conoscere anche javascript (certo aiuta ). Molti siti sostengono sia possibile imparare anche senza sapere nulla di css ma non sono di questa opinione… questo perchè (come vedremo) jQuery fa uso di molte funzioni, caratteristiche e selettori css, se non sapete neppure di cosa sto parlando dubito potrete capire appieno questo linguaggio. Pertanto se non sapete cosa sono i css  (fogli di stile) vi consiglio di studiarli quanto prima perchè sono le basi del web 2.0.

Stando a quanto detto, avverto che il resto della guida richiede una conoscenza base dei css.

Iniziamo! per poter usare il codice e le funzionalità jQuery servono delle librerie. Le librerie sono un set di funzionalità standard che interpretano il codice jQuery e restituiscono determinate animazioni o valori. Le librerie sono scaricabili tramite CDN di google oppure al sito ufficiale jQuery. Una volta scaricate aprite il vostro ducumento html e incorporate le librerie dentro “l’head” in questo modo:

METODO CDN:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>

METODO “LOCALE”:

<script type="text/javascript" src="js/tua_versione_jquery.js"></script>

Alcuni consigli:

– Usate sempre le versioni .min (sta per minified ovvero compresso) sono più veloci da caricare, e poichè siete alle basi non avete bisogno di poter modificare le librerie.

– Preferite i CDN di Google per ridurre i tempi di caricamento (Leggi qui per maggiori dettagli).

I selettori di jQuery

Il linguaggio si basa principalmente sui selettori CSS. ID e Classi saranno il vostro pane per poter dare vita alle animazioni, effetti e molto altro. Sono validi tutti i selettori CSS, dai listati (ul e li) ai collegamenti (a) fino ad arrivare alle più classiche classi e ID. I selettori indicano al linguaggio quale o quali elementi usare e “selezionare”. Per animazioni, effetti e tutte le altre proprietà.

Ecco una carrellata di esempi di selettori:

//Seleziono un  ID chiamato BOX (da specificare in CSS e HTML)

$("#box")

//Seleziono classe "ciao"

$(".classe")

//Seleziono il listato del menu (utile per animare i menu, ad esempio)

$("#menu li")

//Seleziono il link dei file di immagine

$("img a")

//Posso specificare anche selettori gerarchici

$("ul > li"); //solo gli elementi lista diretti discendenti del tag ul

Queste sono le classi fondamentali da sapere, oltre a queste valgono tutte le altre classi e tag dei CSS.

Ovviamente, se selezionate con jQuery l’id “box” dovete ricordarvi di specificare delle prorpietà nei CSS e creare di fatto l’entità nell’html in questo modo:

<div id="box"></div> //e nei CSS #box{TUO STILE}

Questo può sembrare scontato, ma sopratutto nei primi passi, non lo e’. Ho pensato di scriverlo dato che moltissime guide online che avevo letto quando ho iniziatoa studiare il linguaggio  non menzionavano nulla.

Struttura base di uno script jQuery

Uno script di base inizia in due possibili modi:

$(document).ready(function() {

CODICE

});

Oppure:

$(window).load(function(){

CODICE

});

La differenza è che con il primo metodo il codice viene eseguito solo dopo al caricamento degli elementi del documento html (immagini, video, testo e altro). Con secondo metodo il caricamento e l’esecuzione dello script avviene in contemporanea. Se avete un sito pesante con immagini, grafica e altro il secondo metodo e’ sconsigliatissimo. In generale, e per progetti di medio-bassa difficoltà il primo metodo farà al caso vostro. Nel caso vi servisse il secondo, potete pensare a un caricamento asincrono con una callback Ajax ( anche se qua andiamo sul difficile).

La parentesi graffa, tonda e il punto e virgola finale indicano la fine del DOM ( in gergo tecnico DOMINIO jQuery). Nel caso mancassero, il documento non si eseguirebbe nemmeno restituendo errore, quindi non dimenticatele!.

Basta teoria, Il vostro primo script!

DEMO | DOWNLOAD

Costruiamo il nostro primo script! Iniziamo con i CSS:

<style>
body{
margin:0;
padding:0;
text-align:center;
background-color:#000;
}

#main{
width:960px;
height:600px;
background-color:#FFF;
margin:0 auto;
padding:0;
}

.apri{ color:#000;}
.chiudi{ color:#000;}

#box{ width:450px; height:250px; background-color:#069; margin-left:20px;  display:none;}

#menu{ width:500px; height:100px;}
#menu li{ float:left; margin:20px; list-style:none; cursor:pointer;}
</style>

Costruiamo l’html:

<body>

<div id="main">

        <ul id="menu">
        <li class="apri">APRI</li>
       	<li class="chiudi">CHIUDI</li>
		</ul>
	<div id="box"></div>

</div>

</body>

Diamo vita al tutto con jQuery:

<script type="text/javascript">

$(document).ready(function() {

			$(".apri").click(
	 		function(){
	 		$("#box").fadeIn("slow");
			});

			$(".chiudi").click(
	 		function(){
	 		$("#box").fadeOut("slow");
			});

	});//FINE DOM

</script>

Per vedere la demo dell’esempio completo, clicca qui.

Come vedete ho usato i selettori e le proprietà fadeIn e fadeOut (che approfondiremo) che permettono di far apparire/scomparire un div con effetto fade. Il menu apri e chiudi funge da “interruttore”. Non vi preoccupate se non capite ancora tutto, limitatevi a studiare bene i selettori, e confrontate con l’esempio. Capire come si selezionano gli elementi e’ fondamentale con Jquery.

SOMMARIO GUIDA

Parte 1: I primi passi con jQuery

Parte 2: Animazioni di base con jQuery

Parte 3: Guida pratica, overlay jQuery

Parte 4: Guida Pratica, Tooltip grafico

Parte 5: Evitare conflitti fra script jQuery

 Parte 6: Uso di delay per temporizzare le immagini