jQuery Framework | Blog | ScripTips

jQuery Framework

28/06/2008 22:48 Author

mem

jQuery è un framework JavaScript che sta risquotendo un enorme successo, grazie alla sua leggerezza ed alla sua potenzialità.
Per chi non ha mai utilizzato fino ad ora una libreria JavaScript, che essa fornisce degli strumenti che ci possono semplificare la vita durante lo sviluppo di una pagina web.

In jQuery, alcuni di questi strumenti (i più importanti) sono la gestione degli eventi, le animazioni e le interazioni grazie ad AJAX.

Download

Prima di fare il download della libreria, dobbiamo spendere due paroline sulle dimensioni.
Il codice JavaScript, come qualsiasi linguaggio di programmazione, può arrivare ad occupare un peso non indifferente, soprattutto quando i passaggi all'interno degli script sono commentati. Questo può essere un problema per un sito web, il quale spesso presenta costi "a peso di banda".

jQuery ci viene incontro, fornendoci varie versioni (anche compresse) della libreria. Ovviamente noi scegliamo una di quelle con il peso minore:

jQuery Packed

(30kb)

Installare jQuery

L'installazione è veramente molto semplice:

<html>
    <head>
        <script type="text/javascript" src="percorso/per/jquery.js"></script>
        <script type="text/javascript">
            //Il tuo script va scritto qui
        </script>
    </head>
    <body>
        <a href="http://jquery.com/">jQuery</a>
    </body>
</html>

Primi passi

Molto spesso il codice JS deve essere eseguito al caricamento della pagina (on ready), e di solito questo viene fatto nel seguento modo:

window.onload = function(){ //Codice JS }

Questo però è un errore, in realtà il codice verrà eseguito solamente quando tutti gli altri elementi della pagina verranno caricati (immagini, banner ecc.).

Con jQuery tutto questo si risolve utilizzando il seguente codice:

$(document).ready(function(){
//Codice JS
});

Hello World

Non ci rimane ora che provare il codice messo insieme e verificare che tutto funzioni a dovere. A tal proposito, quale tutorial che si rispetti non inizia con un Hello World?

<html>
    <head>
        <script type="text/javascript" src="percorso/per/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                alert("Hello World!");
            });
        </script>
    </head>
    <body>
        <a href="http://jquery.com/">jQuery</a>
    </body>
</html>

Una volta salvata la pagina come documento html ed eseguita, dovremmo ottenere un alert box con scritto, ovviamente, Hello World! (DEMO)

Proviamo un esempio più complicato, utilizzando questa volta anche l'evento click:

<html>
    <head>
        <script type="text/javascript" src="percorso/per/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("a").click(function(){
                    alert("Grazie per averci visitato!");
                });
            });
        </script>
    </head>
    <body>
        <a href="http://jquery.com/">jQuery</a>
    </body>
</html>

Questa volta, l'alert box comparirà solamente premendo con il mouse su un collegamento qualsiasi della pagina (DEMO)

Collegamenti di approfondimento

http://jquery.com

http://docs.jquery.com/Main_Page

http://docs.jquery.com/How_jQuery_Works

http://docs.jquery.com/Tutorials