Breve guida a jQuery

Corso Javascript Impara a creare controlli ed animazioni

1. Introduzione a jQuery

jQuery è un framework realizzato in Javascript per la programmazione di script lato client proprio attraverso il linguaggio con cui è stato realizzato. Grazie a jQuery è possibile realizzare, attraverso pochissime righe di codice, script altrimenti molto complessi che consentono di creare effetti su testo, immagini, controlli di varia natura e di interagire in modo semplice e diretto con i CSS, con AJAX e cosi via.

E' possibile scaricare jQuery gratuitamente dal suo sito ufficiale nell'ultima versione. Una volta scaricato il file jquery.js è possibile richiamarlo all'interno delle proprie pagine Web attraverso il seguente codice:

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

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

$()

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

<div>Codice HTML con cui jQuery deve interagire...</div>

<script type="text/javascript">
// Qui lo script...
</script>

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

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").css("color", "#FF0000");
});
</script>

<div id="testo">W jQuery!</div>

$("#testo")

document.getElementById("testo")

$("div.testo")

$("div")

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

<script type="text/javascript">
$(document).ready(function(){
    $("div span").css("color", "#FF0000");
});
</script>

<div><span>W jQuery</span> :-)</div>

• ready - caricamento anche parziale della pagina.
• load - caricamento completo della pagina.
• click - click su di un elemento.
• mouseover - passaggio del mouse di un elemento.
• mouseout - uscita del mouse da un elemento.
• error - gestione di un eventuale errore.
• scroll - scrolling della pagina.
• resize - ridimensionamento della pagina.
• focus - focus su di un elemento di un form.
• submit - invio di un form.

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

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").click(function(){
        alert("Ciao!");
    });
});
</script>

<div id="testo">Clicca qui...</div>

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

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").html("W jQuery!");
});
</script>

<div id="testo"></div>

$("#testo").text("W jQuery!");

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

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").append(" ora e per sempre :-)");
});
</script>

<div id="testo">W jQuery</div>

$(selettore).css(comando CSS, valore);

$("#testo").css("color", "#FF0000");

• hide - nasconde un elemento.
• position - posiziona un elemento.
• width - imposta o restituisce la larghezza di un elemento.
• height - imposta o restituisce l'altezza di un elemento.
• scrollTop - gestisce lo scroll di un elemento verso l'alto.
• scrollLeft - gestisce lo scroll di un elemento verso sinistra.

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

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").css("overflow", "auto");
    $("#testo").width(300);
    $("#testo").height(200);
    $("#scorri").click(function(){
        $("#testo").scrollTop(150);
    });
});
</script>

<div id="scorri"><b>Scorri cliccando qui...</b></div>
<div id="testo">
W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>
W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>
W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>
W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>
W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>
</div>

$.ajax({
    // Qui il codice...
});

• type - specifica il metodo di invio della richiesta ed accetta i valori "get" o "post".
• url - accetta il percorso ed il nome del file lato server che esegue uno script (ASP, PHP, ASP.NET, etc...).
• data - accoda dei dati allo script.
• dataType - specifica il tipo di dati trattato, ad esempio "text".

• fadeIn - effetto dissolvenza in apparizione.
• fadeOut - effetto dissolvenza in scomparsa.
• slideDown - apparizione con effetto slide dal basso.
• slideUp - scomparsa con effetto slide dall'alto.

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").hide();
    $("#testo").fadeIn();
});
</script>

<div id="testo">W jQuery!</div>

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

<script type="text/javascript">
function Scompari()
{
    $("#testo").slideUp();
}
$(document).ready(function(){
    window.setTimeout("Scompari()", 3000);
});
</script>

<div id="testo">W jQuery!</div>

TAGS - jquery