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
Ci sono molte più cose che puoi fare con jQuery.
L’elenco non finisce qui, ci sono molte altre cose interessanti che puoi fare con jQuery.
Ci sono diversi vantaggi per cui si dovrebbe optare per l’uso 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.
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.
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.
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:
<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;$(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>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.
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>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>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.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>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>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>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>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:
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.
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>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>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>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>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>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.
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.
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>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>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.
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.
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>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>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>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.
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>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>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
.
Coveware by Veeam continuerà a fornire servizi di risposta agli incidenti di cyber-estorsione. Coveware offrirà funzionalità di forensics e remediation…
La manutenzione predittiva sta rivoluzionando il settore dell'oil & gas, con un approccio innovativo e proattivo alla gestione degli impianti.…
La CMA del Regno Unito ha lanciato un avvertimento circa il comportamento delle Big Tech sul mercato dell’intelligenza artificiale. La…
Il Decreto "Case Green", formulato dall'Unione Europea per potenziare l'efficienza energetica degli edifici, ha concluso il suo iter legislativo con…