Introduzione a jQuery



jquery_logo.gif

Introduzione a jQuery

jQuery è una libreria Javascript che semplifica la realizzazione di alcune funzionalità che richiedono la conoscenza dei browser (Internet Explorer, Firefox, Opera, Safari, …), del cosidetto DOM (Document Object Model) e dei CSS (Common Style Sheet).
Il motto della liberia è “write less, do more.”, cioè fai molto di più, ma scrivendo meno codice.
E questo in effetti è vero, di seguito vediamo alcuni piccoli esempi di come utilizzare jQuery nelle vostre pagine Web.

Intanto si deve ‘capire’ il meccanismo che guida jQuery: ad ogni elemento grafico (scritte, bottoni,intestazioni e quant’altro) è possibile assegnare delle azioni corrispondenti.
Per esempio se volessimo che ‘cliccando il bottone A appaia una parte nascosta X’ possiamo
farlo con i seguenti comandi:

<html>
<head>
<title>Prova jQuery 1</title>
<style>
#X    {display: none;}    /*nasconde il campo*/
</style>
<script language=JavaScript src=jquery-1.2.6.min.js></script>
<SCRIPT language=JavaScript>
$(document).ready(function(){
$("#bottoneA").click(function(){ $("X").show(); });
});
</SCRIPT>
</head>
<body>
<input type=button id=bottoneA value='Mostra campo X nascosto'>
<div id=X><br><br>campo nascosto<br><br></div>
</body>
</html>

Per avere un termine di paragone di seguito un estratto di un ‘classico’ modo ‘vecchio stile’ per fare la stessa cosa:
<button onclick='MostraX()'>Mostra campo X nascosto</button>

function MostraX(){
document.getElementById('X').style.visibility = 'visible';
}

Fino ad ora potremmo dire “Non c’e’ gran differenza!”, ma passiamo ora ad aggiungere altre azioni più complesse per capire meglio la potenza di jQuery.
Immaginiamo ora di dover eseguire alcune animazioni nel mostrare la parte X e  contemporaneamente nascondere una parte Y che deve essere sostituita, con jquery possiamo dire:

<html>
<head>
<title>Prova jQuery 2</title>
<style>
#X    {display: none;}    /*nasconde il campo*/
</style>
<script language=JavaScript src=jquery-1.2.6.min.js></script>
<SCRIPT language=JavaScript>
$(document).ready(function(){
$("#bottoneA").click(function(){
$("#Y").hide("slow");
$("#X").show("slow");
});
});
</SCRIPT>
</head>
<body>
<input type=button id=bottoneA value='Mostra campo X nascosto e nascondi Y'>
<div id=X><br><br>campo nascosto<br><br></div>
<div id=Y><br><br>campo visibile<br><br></div>
</body>
</html>

Si iniziano a notare alcune semplificazioni che la potenza di jQuery ci consente di fare:
“il nostro codice HTML è molto pulito, ed il nostro codice di gestione degli eventi
molto conciso e chiaro”.
Notare che non solo abbiamo nascosto/mostrato i due campi, ma nell’operazione abbiamo aggiunto anche un semplice animazione: hide(“slow”) e show(“slow”).

Passiamo ora ad un esempio leggermente più complesso che ci introduce alla chainability dei comandi di jQuery: la maggior parte delle funzioni jQuery ritorna un oggetto jQuery e questo ci consente, sfruttando javascript, di ‘incatenare’ una serie di operazioni riducendo il codice (ma non perdendo in chiarezza, anzi!).

Al nostro esempio aggiungiamo ora la possibilità di modificare il testo del campo Y quando viene reso visibile:

<html>
<head>
<title>Prova jQuery 3</title>
<style>
#X    {display: none;}    /*nasconde il campo*/
</style>
<script language=JavaScript src=jquery-1.2.6.min.js></script>
<SCRIPT language=JavaScript>
$(document).ready(function(){
$("#bottoneA").click(function(){
$("#X").hide("slow");
$("#Y").show("slow").html("<br>Questo testo e' stato cambiato con <b>jQuery</b><br>");
});
});
</SCRIPT>
</head>
<body>
<button id=bottoneA> Mostra campo nascosto X e nascondi Y</button>
<div id=X><br><br>campo nascosto<br><br></div>
<div id=Y><br><br>campo visibile<br><br></div>
</body>
</html>

Nell’esempio abbiamo collegato più funzioni di jQuery assieme ed ognuna delle operazioni
viene eseguita nell’ordine in cui l’abbiamo scritta.

Spero che questa breve introduzione a jQuery sia stata chiara, non per comprendere a fondo, ma per iniziare a comprendere la potenza che jQuery può fornire alle nostre applicazioni web.

Sul mio sito ABspace-ComputerSpace potete trovare un conciso manuale delle funzionalità di jQuery (che ovviamente viene usata nel sito stesso).

Se questo articolo sarà apprezzato ne seguiranno altri.

alberto bellina

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
  • Davvero molto interessante…ci sono enormi potenzialità con queste librerie…

  • Ringhio

    cmq non è uguale al visibility ma lavori con il display che ben altra cosa :)

Pinterest