Iniziare con jQuery: le basi indispensabili

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!

iniziare-con-jquery2

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!

iniziare-con-jquery1

DEMODOWNLOAD

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

  1. Ciao! Cercando uno script mi sono imbattuto solo ora il tuo sito… e mi sembra si davvero interessante e pieno di informazioni utili, quindi complimenti! Penso lo visiterò spesso! 🙂

    Volevo chiederti un piccolo aiuto siccome vorrei implementare la comparsa in fade di un div (con testi e immagini) ma partendo da flash… Ho associato ad un pulsante questa azione:

    on (release) {
    getURL(“javascript:apri()”);
    }

    in realtà vorrei che il div comparisse in fade dopo la mia animazione in flash, ma credo sia lo stesso

    ho provato in questo modo ma in locale (purtroppo non sono ancora riuscito a provarlo sul web) non sembra funzionare… come potrai capire sono decisamente all’asciutto di programmazione… credo che la cosa sia fattibilissima… ma è il mio livello di conoscenza a essere molto basso 😉

    cosa mi consigli? oltre studiare javascript! 🙂

  2. …immaginavo questo genere di risposta 😉 vorrei abbandonare flash come giustamente mi consigli, credo anche io che non sia la migliore soluzione… ma in questo progetto purtroppo sono costretto ad utilizzarlo… secondo te quale potrebbe essere una situazione alternativa per ottenere questo risultato? escludendo jquery dici che non si può fare nulla usando javascript?

  3. Ciao, complimenti per il lavoro, funziona bene!

    Una curiosità, nella stessa pagina ho pià DIV nascosti, come posso adattare il tuo script?

    Ti ringrazio in anticipo.

  4. Piccola segnalazione:

    dalla 1.8 non il toggle funziona in modo diverso

    cito la documentazione ufficiale

    Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

    😉

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Creative design inspiration: Graham and Green

Creative design inspiration: Graham and Green