Pixel verifica Alexa

GuidejQuery

Le basi jQuery: cosa sapere per iniziare.

29 giugno 2015 — by Giusy D'atria0

main

GuidejQuery

Le basi jQuery: cosa sapere per iniziare.

29 giugno 2015 — by Giusy D'atria0

jquery-logo.png

jQuery viene definito come framework di sviluppo javascript. Questo significa che jQuery si appoggia e usa il linguaggio javascript, rendendolo più snello, semplice e immediato.

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 righe di codice, anche per le animazioni più comuni e semplici. Tutto il contrario con JQuery il codice risulta più sintetico, semplice e immediato.

Le basi jQuery per programmare ?

Le basi indispensabili da conoscere sono principalmente html e CSS.

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 dal sito ufficiale jQuery. Una volta scaricate aprite il vostro documento html e incorporate le librerie dentro “l’head” in questo modo:

METODO CDN:

METODO “LOCALE”:

 

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

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:

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:

Struttura base di uno script jQuery

Uno script di base inizia in due possibili modi:

OPPURE

La differenza è che con il primo metodo il codice viene eseguito solo dopo al caricamento degli elementi del documento html.  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 .

La parentesi graffa, tonda e il punto e virgola finale indicano la fine del DOM, Nel caso mancassero, il documento non si eseguirebbe nemmeno restituendo errore, quindi non dimenticatele

Script

 

Costruiamo l’html:

Diamo vita al tutto con jQuery:

[Voti: 1    Media Voto: 4/5]

Giusy D'atria

Giusy D'atria

CopyWriter at Mi Web Design
CopyWriter e Specialista SEO, mi occupo della redazione degli articoli per il Blog e dell'ottimizzazione dei Siti Web per i Motori di Ricerca.
Giusy D'atria

Latest posts by Giusy D'atria (see all)

Le basi jQuery: cosa sapere per iniziare. scritto da Giusy D'atria media voto 4/5 - 1 voti utenti

Leave a Reply