jQuery: breve guida all’utilizzo della libreria JavaScript

Nata con l’obiettivo di semplificare l’utilizzo di JavaScript, jQuery consente di rendere il codice semplice, veloce da sviluppare e compatibile

JQuery logo

jQuery è una libreria JavaScript per semplificare l’utilizzo dell’HTML, JavaScript e molto altro. Per poter utilizzare jQuery bisogna importare la libreria all’interno della pagina HTML dopo averlo scaricato da jquery.com:

    <head>
        <script src="jquery-1.12.4.min.js"></script>
    </head>

In alternativa si può fare riferimento ad un CDN in questo modo:

    <head>
        <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>

Il selettore jQuery viene utilizzato per fare il match con degli elementi o gruppi di elementi del DOM e può essere scritto in modo equivalente come $() o jQuery(). Questo selettore può avere diversi tipi di elementi:

  • Tag name: prende il nome di tutti i tag nel DOM. Ad esempio per fare rifermenti a tutti i paragrafi del documento scriveremo $(‘p’) o in modo equivalente jQuery(‘p’);
  • Tag ID: prende un tag con quello specifico id. Ad esempio: $(‘#some-id’);
  • Tag class: consente di fare riferimento a tutti gli elementi che hanno una specifica classe. Questa funzione restituisce un array con tutti gli elementi individuati nel DOM con quella classe. Esempio: $(‘.some-class’);
  • Universale (*): per fare riferimento a tutti gli elementi contenuti nel DOM di una pagina (head, body, ecc.). Ad esempio: $(‘*’) ;
  • Elementi multipli: consente di fare riferimento a differenti tipi di elementi contemporaneamente. Ad esempio scrivendo $(‘div, p’) faremo riferimento a tutti i div e i p, anche in nessuna relazione tra di loro.

Ecco un piccolo esempio con jQuery in cui viene visualizzato un messaggio quando il documento è caricato:

    lt;script type = "text/javascript">
        $(document).ready(function(){
            document.write("Messaggio stampato quando il documento è pronto");
        });
    </script>

Nell’esempio si fa riferimento all’oggetto document in cui si fa riferimento al contesto. Con jQuery si può far riferimento agli elementi come si fa nei selettori CSS, ad esempio per fare riferimento ad un elemento con datrevo-id contenuto all’interno di un DIV, scriveremo:

  $("div#datrevo-id").click(function() {
    // this refers to a div DOM element with datrevo-id as identifier
  });

Con jQuery tutti i selettori CSS possono essere utilizzati per fare riferimento agli elementi, ad esempio:

  • $(“p a”) per fare riferimento ai figli di un elemento, ad esempio ai link figli di paragrafo;
  • $(“li:not(.mia-classe)”) seleziona tutti gli elementi <li> che non hanno “mia-classe“;
  • $(“p > *”) consente di selezionare tutti i selettori figli i elementi che sono figli di un paragrafo;
  • $(“ol li:first”) prende solo i primi <li> di ogni elemento <ol>;
  • $(“li:last”) fa riferimento solo all’ultimo <li>;
  • $(“li:eq(2)”) prende solo il terzo <li> di un elenco;
  • $(“label + em”) seleziona tutti gli elementi che hanno <label> e sono immediatamente seguiti da un <em>;
  • $(“div:empty”) seleziona tutti i div che non hanno figli;
  • $(“div[p]”) consente di selezionare tutti gli elementi che hanno un div al cui interno si trova un paragrafo;
  • $(“input[@name=mio-nome]”) seleziona gli elementi che hanno l’elemento <input> con valore uguale a “mio-nome“;
  • $(“input[@name^=mio-nome]”) fa riferimento agli elementi <input> che hanno come nome un valore che inizia con “mio-nome“;
  • $(“a[@href*=datrevo.com]”) seleziona tutti i link che hanno come valore il dominio datrevo.com;
  • $(“li:contains(testo)”) prende tutti gli <li> che contengono la parola “testo“.

Dopo aver selezionato gli elementi con jQuery è possibile eseguire una serie di funzioni, ad esempio:

  • attr() consente di modificare gli attributi degli elementi. Ad esempio, se si vuole copiare il valore dell’attributo title di un elemento <em>, scriveremo:
        $(document).ready(function() {
            var title = $("em").attr("title");
        });

    La funzione può essere utilizzata anche per assegnare l’indirizzo delle immagini da visualizzare:

        $("#myimg").attr("src", "/jquery/images/jquery.jpg");

  • text(“valore”) consente di settare il testo agli elementi, ad esempio per inserire un titolo ad un elemento scriveremo:
        $(document).ready(function() {
            $("#id-elemento").text("Queso è un nuovo titolo");
        });

  • val() ritorna il valore dell’elemento individuato. Ad esempio se si vuole prendere il valore di un elemento con uno specifico id scriveremo:
        var elemIdValue = $("#elem-id").val();

  • val(“valore”) consente di settare il valore agli elementi individuati, ad esempio per in tutti gli elementi con cui si è fatto il match.
        $("input:text").val("Sito web: datrevo.com");

  • addClass(classi) consete di aggiungere una classe agli elementi, ad esempio per applicare una nostra classe CSS di nome “mia-classe”, per applicala ai paragrafi scriveremo:
        $("p").addClass("mia-classe");

  • $(“p”).html() viene utilizzato per recuperare il codice HTML di un elemento, ad esempio per un elemento identificato da mio-id possiamo scrivere:
        var codice_html = $("#mio-id").html();

  • $(“div”).html(“codice html”) sett il codice html degli elementi individuati, ad esempio:
        $("div").html("<span>Nuovo testo</span>");

  • $(“#myButtonId”).click(function() {…} consente di aggiungere un listener che si attiva al click su un elemento, ad esempio per mostrare un messaggio al click su un bottone scriveremo:
        $("#myButtonId").click(function() {
            alert("Campi non compilati correttamente");
        }

Utilizzare Ajax tramite jQuery, un metodo più veloce per connettersi ad un server web

jQuery facilita l’utilizzo di Ajax, non sarà più necessario preoccuparsi della compatibilità con vecchi browser o di configurare l’oggetto XMLHttpRequest. Ecco un esempio per chiamare un’api di un server tramite jQuey in cui si vuole passare come parametro la matricola di uno studente e si vuole ottenere come risposta il voto dell’ultimo esame sostenuto dallo studente:

    $.ajax({
        url: "/api/getGradeLastExam",
        data: {
            studentcode: 684849
        },
        success: function(result) {
            $("#result-exam").html( "Il voto dell'ultimo esame è stato: " + result + "." );
        }
    });

Nell’esempio viene chiamata l’api del nostro server all’url /api/getGradeLastExam a cui viene passato come parametro la matricola 684849 dello studente. Il risultato della chiamata Ajax verrà restituito nella promise success e verrà visualizzato al posto dell’elemento con identificativo #result-exam.

Ecco un esempio di come connettere un’applicazione web con una Servlet in jQuery:

    $.ajax({
        url : 'MyServlet',
        data : {
            firstNumber : firstNumber,
            secondNumber : secondNumber
        },
        success : function(responseText) {
            resultResponse.text(responseText);
        }
    });

Pubblicato in CSS, Front-end, JavaScript, Programmazione Taggato con: , , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*