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:
<head>
<script src="/jquery-3.3.1.min.js"></script>
</head>
BLOCCO JQUERY
Classico blocco JQuery che esegue tutte le operazioni solo quando il DOM della pagina è pronto:
<script language="javascript">
$(document).ready(function(){
});//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ì:
<script language="javascript">
$(document).ready(function(){
$( 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:
<script language="javascript">
$(document).ready(function () {
$("#myId").blur(function () {
...
});
});//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!