jQuery

Inserire jQuery nelle nostre pagine HTML

1 feb , 2012  

jQuery logojQuery è una libreria che ci permette di utilizzare JavaScript in maniera semplificata e veloce.
Questa libreria è principalmente utilizzata per gli eventi, l’animazione e le interazioni della pagina. Una volta capito come funziona jQuery è veramente semplice iniziare a lavorarci sopra e utilizzarlo; un altro fattore importante è che (a differenza dell’attuale CSS3) questo script si definisce cross-browser, ossia è supportato da tutti i browser e funziona in maniera uguale con tutti!

Per iniziare a lavorare con jQuery, dobbiamo prima di tutto caricarlo nella nostra pagina web: il modo più veloce e semplice per farlo è quello di scaricare il codice dal sito ufficiale di jQuery e caricarlo nel nostro server via ftp. Verrà quindi collegato alla nostra pagina inserendo il richiamo all’interno del tag <head>, in questo modo:

1
2
3
<head>
   	<script type="text/javascript" src="cartella_server/jquery-1.7.1.min.js"></script>
</head>

Come ho già detto questa è la maniera più semplice e veloce, ma non ho detto che sia la migliore :)

Il codice di jQuery è relativamente leggero, ma rischiamo comunque (con un gran numero di richieste dai client) di appesantire il nostro sito. Per ottimizzare quindi le prestazioni del nostro sito, renderlo più veloce e ottimizzarlo dal punto di vista SEO, possiamo utilizzare le Librerie API di Google che ci permettono di caricare il codice di jQuery nella nostra pagina senza inserirlo sul nostro server!

Il codice quindi diventa questo:

1
2
3
4
5
6
<head>
   	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    	<script type="text/javascript">
	  google.load("jquery", "1");
	</script>
</head>

Ci sono notevoli vantaggi nell’utilizzare le API di Google: oltre ad aumentare la velocità di caricamento permette di tenere in continuo aggiornamento la libreria jQuery. Infatti il codice che ho inserito caricherà la libreria più recente rilasciata!

Ora siamo pronti! Cosa aspettate, iniziate a personalizzare le vostre pagine! ;)

, , , ,