Articoli

JQuery, cos’è e cosa possiamo fare con la libreria JavaScript

jQuery è una libreria JavaScript veloce, leggera e ricca di funzionalità basata sul principio “scrivi di meno, fai di più” . Le API di JQuery semplificano la gestione e manutenzione di documenti HTML, la gestione degli eventi, l’aggiunta di effetti di animazione a una pagina Web. E’ compatibile con tutti i principali browser come Chrome, Firefox, Safari, Edge.

La creazione di un’applicazione basata su Ajax, diventa molto semplice e veloce con jQuery.

jQuery è stato originariamente creato da John Resig all’inizio del 2006. Il progetto jQuery è attualmente gestito e gestito da un gruppo distribuito di sviluppatori come progetto open source.

Puoi risparmiare molto tempo e fatica con jQuery. Quindi aggiungi questo sito tra i tuoi preferiti e continua la lettura

Cosa puoi fare con jQuery

Ci sono molte più cose che puoi fare con jQuery.

  • È possibile selezionare facilmente gli elementi della pagina HTML, per leggere o modificare attributi;
  • Puoi facilmente creare effetti come mostrare o nascondere elementi, transizioni, scorrimenti e così via;
  • Puoi creare facilmente animazioni CSS complesse con meno righe di codice;
  • Puoi facilmente manipolare gli elementi DOM e i loro attributi;
  • Puoi facilmente implementare Ajax per abilitare lo scambio di dati asincrono tra client e server;
  • Puoi facilmente attraversare tutto l’albero DOM per individuare qualsiasi elemento;
  • Puoi facilmente eseguire più azioni su un elemento con una singola riga di codice;
  • Puoi facilmente ottenere o impostare le dimensioni degli elementi HTML.

L’elenco non finisce qui, ci sono molte altre cose interessanti che puoi fare con jQuery.

Vantaggi dell’utilizzo di jQuery

Ci sono diversi vantaggi per cui si dovrebbe optare per l’uso di jQuery:

  • Risparmia molto tempo : puoi risparmiare molto tempo e fatica utilizzando gli effetti e i selettori integrati di jQuery e concentrarti su altri aspetti dello sviluppo;
  • Semplifica le attività JavaScript comuni : jQuery semplifica notevolmente le attività JavaScript comuni. Ora puoi creare facilmente pagine Web ricche di funzionalità e interattive, con meno righe di codice. L’esempio tipico è l’implementazione di Ajax per aggiornare il contenuto di una pagina, senza aggiornarla;
  • Semplicità : jQuery è molto facile da usare. Chiunque abbia una conoscenza operativa di base di HTML, CSS e JavaScript può iniziare lo sviluppo con jQuery;
  • Compatibile con tutti i browser : jQuery è stato creato pensando ai browser moderni ed è compatibile con tutti i principali browser moderni come Chrome, Firefox, Safari, Edge;
  • Assolutamente gratuito – E la parte migliore è che è completamente gratuito da scaricare e utilizzare.

Download di jQuery

Per iniziare, scarichiamo prima una copia di jQuery e successivamente la includeremo nel nostro progetto. Sono disponibili per il download due versioni di jQuery: compressa e non compressa .

Il file non compresso è più adatto per lo sviluppo o il debug; mentre, il file minimizzato e compresso è consigliato per la produzione perché risparmia la larghezza di banda e migliora le prestazioni grazie alle dimensioni ridotte del file.

Possiamo scaricare jQuery da qui: https://jquery.com/download/

Una volta scaricato il file jQuery puoi vedere che ha una estensione js, cioè è un file JavaScript. Infatti JQuery non è altro che una libreria JavaScript, quindi puoi includere il file jQuery nel documento HTML con l’elemento <script> proprio come includi i normali file JavaScript.

<head>
    <title>Simple HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Ricorda di includere sempre il file jQuery prima degli script personalizzati; in caso contrario, le API jQuery non saranno disponibili quando il tuo codice jQuery tenterà di accedervi.

Come avrai notato, nell’esempio precedente abbiamo saltato l’attributo type="text/javascript" all’interno del tag <script>. Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefinito in HTML5 e in tutti i browser moderni.

jQuery da CDN

Come alternativa, puoi includere jQuery nel tuo documento tramite collegamenti CDN (Content Delivery Network) disponibili gratuitamente, se preferisci evitare di scaricare il file.

I CDN possono offrire un vantaggio in termini di prestazioni riducendo il tempo di caricamento, perché ospitano jQuery su più server sparsi in tutto il mondo e quando un utente richiede il file, verrà messo a disposizione dal server più vicino.

Ciò offre anche il vantaggio che se il visitatore della tua pagina web ha già scaricato una copia di jQuery dallo stesso CDN mentre visitava altri siti, non dovrà essere riscaricata poiché è già presente nella cache del browser.

In questo caso dovrai scrivere:

<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>

Oltre alla CDN messa a disposizione dal progetto jquery, puoi includere jQuery tramite Google e Microsoft CDN.

Prima pagina Web basata su jQuery

Dopo aver visto gli obiettivi della libreria jQuery e come includerla nel tuo documento, ora è il momento di mettere in pratica jQuery.

Andiamo ora a eseguire una semplice operazione jQuery modificando il colore del testo dell’intestazione dal colore predefinito nero al colore verde.

<head>
    <title>My First jQuery Web Page</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#00ff00");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Nel codice abbiamo eseguito una semplice operazione jQuery modificando il colore dell’intestazione, cioè l’elemento <h1> utilizzando il selettore e il metodo css() dell’elemento jQuery quando il documento è pronto, noto come evento documento pronto. 

Sintassi jQuery

Un’istruzione jQuery, in genere, inizia con il simbolo del dollaro ( $) e termina con un punto e virgola ( ;).

In jQuery, il simbolo del dollaro ( $) è solo un alias per jQuery. Consideriamo il seguente codice di esempio che dimostra l’istruzione più semplice di jQuery.

<script>
    $(document).ready(function(){

        alert("Hello I'm a JQuery sign");
    });
</script>

L’esempio mostra semplicemente un messaggio di avviso “Hello I'm a JQuery sign” all’utente. Vediamo alcune caratteristiche:

  • L’elemento <script>: jQuery è solo una libreria JavaScript, il codice jQuery può essere inserito all’interno dell’elemento <script>, oppure puoi inserirlo in un file JavaScript esterno;
  • La riga $(document).ready(handler); è nota come evento pronto. Dove handler è una funzione che viene passata al metodo per essere eseguita, non appena il documento è pronto, cioè quando la gerarchia DOM è stata completamente costruita.

Il metodo jQuery ready() di solito viene utilizzato con una funzione anonima. Quindi, l’esempio sopra può anche essere scritto in una notazione abbreviata come questa:

<script>
    $(function(){
        alert("Hello I'm a JQuery sign");
    });
</script>

Selettori

All’interno di una funzione è possibile scrivere le istruzioni jQuery per eseguire qualsiasi azione seguendo la sintassi di base, come:

$(selector).action();

Dove, $(selector) fondamentalmente seleziona gli elementi HTML dall’albero DOM in modo che possa essere manipolato e action() applica alcune azioni sugli elementi selezionati, come cambiare il valore della proprietà CSS, o impostare il contenuto dell’elemento, ecc.

Vediamo ora un altro esempio che imposta il testo del paragrafo:

<head>
    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

Nell’esempio jQuery si fa riferimento al selettore p, e in questo modo si selezionano tutti i paragrafi, successivamente il metodo text() imposta il contenuto del testo del paragrafo con “Hello World!“.

Il testo del paragrafo nell’esempio precedente viene sostituito automaticamente quando il documento è pronto. Ma vediamo come fare nel caso in cui si voglia eseguire un’azione prima di eseguire il codice jQuery, per sostituire il testo del paragrafo. 

Consideriamo un ultimo esempio:


<head>

    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

In questo esempio il testo del paragrafo viene sostituito solo quando si verifica un evento clic sul bottone “Replace Text“, che significa semplicemente quando un utente fa clic su questo pulsante.

Selezione di elementi per ID

Puoi utilizzare il selettore ID per selezionare un singolo elemento con l’ID univoco sulla pagina.

Ad esempio, il seguente codice jQuery selezionerà ed evidenzierà un elemento con l’attributo ID id="markid", quando il documento è pronto.

<script>
$(document).ready(function(){
    // Highlight element with id markid
    $("#markid").css("background", "grey");
});
</script>
Selezione di elementi con nome della classe

Il selettore di classe può essere utilizzato per selezionare gli elementi con una classe specifica.

Ad esempio, il seguente codice jQuery selezionerà ed evidenzierà gli elementi con l’attributo class class="markclass", quando il documento è pronto.

<script>
$(document).ready(function(){
    // Highlight elements with class markclass
    $(".markclass").css("background", "grey");
});
</script>
Selezione di elementi per nome

Il selettore di elementi può essere utilizzato per selezionare gli elementi in base al nome dell’elemento.

Ad esempio, il seguente codice jQuery selezionerà ed evidenzierà tutto il paragrafo, ovvero gli elementi "<p>" del documento quando sarà pronto.

Newsletter sull’Innovazione
Non perderti le notizie più importanti sull'Innovazione. Iscriviti per riceverle via e-mail.
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>
Selezione di elementi per attributo

Puoi utilizzare il selettore di attributi per selezionare un elemento in base a uno dei suoi attributi HTML, come l’attributo di un link targeto l’attributo di un input type, ecc.

Ad esempio, il seguente codice jQuery selezionerà ed evidenzierà tutti gli input di testo, ad esempio gli elementi "<input>" con type="text", quando il documento è pronto.

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "grey");
});
</script>
Selezione di elementi tramite selettore CSS composto

Puoi anche combinare i selettori CSS per rendere la tua selezione ancora più precisa.

Ad esempio, puoi combinare il selettore di classe con un selettore di elementi per trovare gli elementi in un documento che ha un certo tipo e classe.

<script>
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");
  
    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");
  
    // Highlight li elements inside the ul elements
    $("ul li").css("background", "red");
  
    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "yellow");
  
    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");
  
    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script>
jQuery Selettore personalizzato

Oltre ai selettori definiti, jQuery fornisce il proprio selettore personalizzato per migliorare ulteriormente le capacità di selezione degli elementi su una pagina.

<script>
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");
  
    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");
  
    // Highlight first paragraph element
    $("p:first").css("background", "red");
  
    // Highlight last paragraph element
    $("p:last").css("background", "green");
  
    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");
  
    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");
  
    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>

Eventi

Gli eventi sono spesso attivati ​​dall’interazione dell’utente con la pagina web, ad esempio quando si fa clic su un collegamento o su un pulsante, si immette del testo in una casella di input o in un’area di testo, si effettua una selezione in una casella di selezione, si preme un tasto sulla tastiera, il mouse il puntatore viene spostato ecc. In alcuni casi, il browser stesso può attivare gli eventi, come gli eventi di caricamento e scaricamento della pagina.

jQuery migliora i meccanismi di gestione degli eventi di base offrendo i metodi degli eventi per la maggior parte degli eventi del browser nativo, alcuni di questi metodi sono ready(), click(), keypress(), focus(), blur(), change(), ecc.

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

In generale, gli eventi possono essere classificati in quattro gruppi principali: 

  • eventi mouse ,
  • eventi tastiera ,
  • eventi modulo ed
  • eventi documento/finestra . 

Eventi mouse

Un evento del mouse viene attivato quando l’utente fa clic su un elemento, sposta il puntatore del mouse, ecc.

Qui di seguito alcuni metodi jQuery comunemente usati per gestire gli eventi del mouse.

Il metodo click()

Il metodo click() collega una funzione di gestione eventi agli elementi selezionati per l’evento “click“. La funzione collegata viene eseguita quando l’utente fa clic su quell’elemento. L’esempio seguente nasconderà gli elementi <p> su una pagina quando vengono cliccati.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
Il metodo dblclick()

Il metodo dblclick() collega una funzione di gestione eventi agli elementi selezionati per l’evento “dblclick“. La funzione collegata viene eseguita quando l’utente fa doppio clic su quell’elemento. L’esempio seguente nasconderà gli elementi <p> quando si fa doppio clic su di essi.

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
Il metodo hover()

Il metodo hover() collega una o due funzioni del gestore eventi agli elementi selezionati che viene eseguito quando il puntatore del mouse entra ed esce dagli elementi. La prima funzione viene eseguita quando l’utente posiziona il puntatore del mouse su un elemento, mentre la seconda funzione viene eseguita quando l’utente rimuove il puntatore del mouse da quell’elemento.

L’esempio seguente evidenzierà gli elementi <p> quando si posiziona il cursore su di esso, l’evidenziazione verrà rimossa quando si rimuove il cursore.

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
Il metodo mouseenter()

Il metodo mouseenter() collega una funzione di gestione eventi agli elementi selezionati che viene eseguita quando il mouse entra in un elemento. L’esempio seguente aggiungerà l’evidenziazione della classe all’elemento <p> quando si posiziona il cursore su di esso.

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>
Il metodo mouseleave()

Il metodo mouseleave() collega una funzione di gestione eventi agli elementi selezionati che viene eseguita quando il mouse lascia un elemento. L’esempio seguente rimuoverà l’evidenziazione della classe dall’elemento <p> quando si rimuove il cursore da esso.

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

Eventi della tastiera

Un evento della tastiera viene generato quando l’utente preme o rilascia un tasto sulla tastiera. Vediamo alcuni metodi jQuery comunemente usati per gestire gli eventi della tastiera.

Il metodo keypress()

Il metodo keypress() collega una funzione di gestione degli eventi agli elementi selezionati (in genere i controlli del modulo) che viene eseguita quando il browser riceve l’input da tastiera dall’utente. L’esempio seguente visualizzerà un messaggio quando viene attivato l’evento keypress e quante volte viene attivato quando si preme il tasto sulla tastiera.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

L’evento keypress è simile all’evento keydown, tranne per il fatto che i tasti modificatori e non stampabili come Maiusc, Esc, Backspace o Canc, i tasti freccia ecc. attivano gli eventi keydown ma non gli eventi keypress.

Il metodo keydown()

Il metodo keydown() collega una funzione di gestione eventi agli elementi selezionati (in genere i controlli del modulo) che viene eseguita quando l’utente preme per la prima volta un tasto sulla tastiera. L’esempio seguente visualizzerà un messaggio quando viene attivato l’evento keydown e quante volte viene attivato quando si preme il tasto sulla tastiera.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
Il metodo keyup()

Il metodo keyup() collega una funzione di gestione degli eventi agli elementi selezionati (tipicamente i controlli del modulo) che viene eseguita quando l’utente rilascia un tasto sulla tastiera. L’esempio seguente visualizzerà un messaggio quando viene attivato l’evento keyup e quante volte viene attivato quando si preme e si rilascia un tasto sulla tastiera.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

Eventi di modulo

Un evento del modulo viene attivato quando un controllo del modulo riceve o perde il focus o quando l’utente modifica un valore del controllo del modulo, ad esempio digitando del testo in un input di testo, selezionando un’opzione in una casella di selezione ecc. Ecco alcuni metodi jQuery comunemente usati per gestire gli eventi del modulo.

Il metodo change()

Il metodo change() collega una funzione del gestore eventi agli elementi <input> e viene eseguita quando il suo valore cambia. L’esempio seguente visualizzerà un messaggio di avviso quando si seleziona un’opzione nella casella di selezione a discesa.

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

Per le caselle di selezione, le caselle di controllo e i pulsanti di opzione, l’evento viene attivato immediatamente quando l’utente effettua una selezione con il mouse, ma per l’input di testo e l’area di testo l’evento viene attivato dopo che l’elemento perde il focus.

Il metodo focus()

Il metodo focus() collega una funzione del gestore eventi agli elementi selezionati (in genere controlli e collegamenti del modulo) che viene eseguita quando ottiene lo stato attivo. L’esempio seguente visualizzerà un messaggio quando l’input di testo riceve lo stato attivo.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Il metodo blur()

Il metodo blur() collega una funzione di gestione degli eventi agli elementi del modulo come <input><textarea><select> che viene eseguita quando perde il focus. L’esempio seguente visualizzerà un messaggio quando l’input di testo perde lo stato attivo.

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Il metodo submit()

Il metodo submit() collega una funzione di gestione eventi agli elementi <form> che viene eseguita quando l’utente tenta di inviare un modulo. L’esempio seguente visualizzerà un messaggio in base al valore immesso quando si tenta di inviare il modulo.

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>

Eventi documento/finestra

Gli eventi vengono anche attivati ​​in una situazione in cui la pagina DOM (Document Object Model) è pronta o quando l’utente ridimensiona o scorre la finestra del browser, ecc. Ecco alcuni metodi jQuery comunemente usati per gestire questo tipo di eventi.

Il metodo ready()

Il metodo ready() specifica una funzione da eseguire quando il DOM è completamente caricato.

L’esempio seguente sostituirà il testo dei paragrafi non appena la gerarchia DOM sarà stata completamente costruita e pronta per essere manipolata.

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
Il metodo resize()

Il metodo resize() collega una funzione del gestore eventi all’elemento window che viene eseguito quando la dimensione della finestra del browser cambia.

L’esempio seguente mostrerà la larghezza e l’altezza correnti della finestra del browser quando provi a ridimensionarla trascinandone gli angoli.

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>
Il metodo scroll()

Il metodo scroll() collega una funzione di gestione eventi alla finestra o agli iframe e agli elementi scorrevoli che viene eseguita ogni volta che la posizione di scorrimento dell’elemento cambia.

L’esempio seguente visualizzerà un messaggio quando si scorre la finestra del browser.

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

Ercole Palmeri

.

Newsletter sull’Innovazione
Non perderti le notizie più importanti sull'Innovazione. Iscriviti per riceverle via e-mail.

Articoli recenti

L’autorità antitrust del Regno Unito lancia l’allarme BigTech su GenAI

La CMA del Regno Unito ha lanciato un avvertimento circa il comportamento delle Big Tech sul mercato dell’intelligenza artificiale. La…

18 Aprile 2024

Casa Green: rivoluzione energetica per un futuro sostenibile in Italia

Il Decreto "Case Green", formulato dall'Unione Europea per potenziare l'efficienza energetica degli edifici, ha concluso il suo iter legislativo con…

18 Aprile 2024

Ecommerce in Italia a +27% secondo il nuovo Report di Casaleggio Associati

Presentato il report annuale di Casaleggio Associati sull’Ecommerce in Italia. Report dal nome “AI-Commerce: le frontiere dell'Ecommerce con l'Intelligenza Artificiale”.…

17 Aprile 2024

Idea Brillante: Bandalux presenta Airpure®, la tenda che purifica l’aria

Risultato della costante innovazione tecnologica e all'impegno nei confronti dell'ambiente e del benessere delle persone. Bandalux presenta Airpure®, una tenda…

12 Aprile 2024