How to JQuery - Emmegi Passions

In questa guida analizzeremo alcuni utili consigli per il quotidiano uso di JQuery.

Vedremo cos'è JQuery e come usarlo, come si scrive un valore in un campo HTML, come si può impostare una azione al risize della finestra del browser, come si può lavorare su tutti gli oggetti simili, usare l'evento di click su un pulsante, caricare gli script all'onload del DOM o della pagina, ...

COS'E' JQUERY?

Per dirla con le loro parole: "jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript."

In pratica è una libreria JavaScript!

Se ne volete sapere di più ecco il link ufficiale: jquery.com

CARICAMENTO JQUERY

Prima di usare questa libreria bisogna importarla:

BLOCCO JQUERY

Classico blocco JQuery che esegue tutte le operazioni solo quando il DOM della pagina è pronto:

});//document ready
</script>

Se invece si vogliono eseguire delle operazioni solo quando l'intera pagina è pronta e non solo il DOM si deve fare così:

$( window ).on( "load", myFunct);
});//document ready
</script>

In questo caso, quando il DOM è pronto si invoca il codice JS presente nella funzione ready(). In questa funzione si indica invece cosa eseguire quando la pagina è caricata.

LEGGERE E SCRIVERE UN VALORE

Vediamo come impostare il valore di un componente, sia input type text che comboBox:

$('#MioId').val("MioValore");

Il simbolo # permette di accedere al componente tramite il suo id.

Se invece scrivo:

$(".MiaClasse")

accediamo al componente che ha la classe CSS specificata.

Vediamo quindi come settare un valore se il componente è vuoto:

if ($('#MioId').val()=='')

{
$('#MioId').val("MioValore");
}

La funzione val() permette di impostare e di leggere il contenuto di un campo di input.

Se, invece, abbiamo a che fare con un altro componente bisogna usare la funzione text():

$(this).text("ciao");

Accedo al componente corrente e ne setto il testo a "ciao".

Ad esempio un utile metodo per formattare tutti i componenti con una data classe è il seguente:

          var $AllOccurrency = $(".MiaClasse");
               $AllOccurrency.each(function() {
                       var $this = $(this);
                       var prima = $this.text();
                       var dopo = prima + " ciao ";
                       $(this).text(dopo);
               });

EVENTO ON BLUR

Vediamo come gestire l'evento onBlur() su un componente:

});
});//document ready
</script>

IMPOSTARE UNA AZIONE AL RISIZE DELLA FINESTRA

Nel seguente esempio, vogliamo che quando l'utente effettua il resize della finestra del browser venga eseguita una azione:

    $(window).resize(function(){
               if($(this).width() < 1920){
                   azione1();
               } else {
                   azione2();
               }
    });

Quindi, noi stiamo dicendo che se la size diventa inferiore a 1920px allora bisogna eseguire la funziona azione1(), altrimenti si esegue la funzione azione2().

E se vogliamo fare anche un controllo in fase di caricamento della pagina?

$(document).ready(function(){

    var width = $(window).width();
           if($(this).width() < 1920){
               azione1();
           }

}

PRENDERE E CICLARE SU TUTTI GLI OGGETTI SIMILI

Vediamo come si fa a prendere tutti gli oggetti simili e a ciclare per eseguire una determinata azione:

                var $mioObj = $("miaClasse");
               $mioObj .each(function() {
//si esegue l'azione
               });

Si cicla su tutti gli oggetti che hanno la classe data.

ASSOCIARE L'EVENTO CLICK AD UN PULSANTE

$("#button").click( function()
{
alert('button clicked');
}
);

Buon Lavoro!