JAVASCRIPT
How to JQuery (or Javascript)

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, ...

 

 

 

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

 

BLOCCO JQUERY

Classico blocco JQuery che esegue tutte le operazioni solo quando la pagina è caricata:

 

<script language="javascript">
        $(document).ready(function(){    


        });//document ready
</script>

 

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);                        
                });

 

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() &lt; 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() &lt; 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!

Il nostro sito utilizza i cookie

Usando il sito accetti implicitamente il loro uso. Per saperne di piu'

Approvo