JQuery note sull'utilizzo

JQuery è una libreria JavaScript che permette di semplificare notevolmente le attività lato client di manipolazione del DOM (html).

Vediamo un esempio:

HTML

<ul id="mio-elenco" class="ul-esempio">
  <li>Punto 1</li>
  <li title="Elemento 2">Punto 2</li>
  <li>Punto 3</li>
</ul>

JavaScript

$(document).ready(function () {
  $(".ul-esempio li").append(" <b>*</b>").find("b").css("color","red");
});
da questo risultato:

HTML

<ul id="mio-elenco" class="ul-esempio">
  <li>Punto 1 <b style="color: red;">*</b></li>
  <li title="Elemento 2">Punto 2 <b style="color: red;">*</b></li>
  <li>Punto 3 <b style="color: red;">*</b></li>
</ul>
  • Punto 1 *
  • Punto 2 *
  • Punto 3 *
ovvero prende tutti i tag li all'interno dell'elemento con classe ul-esempio, aggiunge all'interno, dopo il testo, un asterisco bold e lo colora di rosso.

Come iniziare

Per iniziare ad usare JQuery devi linkare la libreria all'interno della pagina html

HTML

<!DOCTYPE html>
<html>
<head>
    <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
     ... html custom ...
    <script>
        ... codice JQuery custom ...
    </script>
</body>
</html>
a questo punto ha a disposizione la funzione di nome $ (dollaro) per usare le funzioni di JQuery
La versione di JQuery 3.x.x, o superiore, non funziona sui browser vecchi

Vedi anche Caricare jQuery e knockout da CDN o da locale

Come selezionare gli elementi

Puoi selezionare gli elementi specificando:
  • il nome del tag $("li")
  • il nome della classe $(".ul-esempio) mettendo il punto prima del nome classe
  • l'id del tag $("#mio-elenco") mettendo un cancelletto (sharp) davanti all'id
Tutti questi modi di referenziare un elemento sono detti selettori.
Attenzione: mentre la classe può essere associata a più elementi, l'ID deve essere univoco nella pagina.
Vedi: https://api.jquery.com/category/selectors/

Come selezionare o cambiare il testo

Per cambiare il testo ci sono due casistiche da considerare:
  • il testo all'interno di un tag html
  • il testo all'interno di un tag di tipo input

HTML

<span>testo di prova</span>
<input type="text" id="txt-1" value="4" />
Per leggere il valore nel primo caso, tag span, uso il metodo html(), mentre nel secondo caso, tag input, il metodo val():

JavaScript

var s = $("span").html();  //s conterrà "testo di prova"
var n = $("#txt-1").val();  //n conterrà "4"
per scrivere un valore uso gli stessi metodi passando un valore all'interno delle parentesi:

JavaScript

$("span").html("nuovo testo");
$("#txt-1").val(55);
Oltre al metodo html() c'è anche text(). La differenza è che mentre html() ritorna tutto il contenuto del tag, compresi altri tag html, il metodo text() ritorna solo il testo rimuovendo qualsiasi tag html.
L'oggetto JQuery ($) ha solo metodi da richiamare con le parentesi
Vedi: https://api.jquery.com/html/ , https://api.jquery.com/val/ , https://api.jquery.com/text/

Eseguire il codice all'apertura della pagina

Per eseguire del codice JQuery e/o JavaScript in modo che non generi errori, deve essere usare il metodo ready passandogli la funzione da richiamare:

JavaScript

$(document).ready(function () {
  // codice da esegure 
});
in questo caso passo al metodo ready una funzione anonima.

Posso usare anche questa forma:

JavaScript

function onInit() {
  // codice da esegure 
};

$(document).ready(onInit);
L'uso del metodo ready mi garantisce che il codice venga eseguito solo dopo che è stata caricata la libreria JQuery e l'html.

Vedi: http://api.jquery.com/ready/

Aggiungere un evento

Per aggiungere un evento, ad esempio, il click su un bottone:

HTML

<input type="button" id="btn-esempio" value="1" />
uso il metodo on per agganciarlo ad uno specifico elemento specificando il tipo di evento (click):

JavaScript

$("#btn-esempio").on( "click", function( event ) {
  alert("hai premuto il pulsante");
});
oppure in quest'altra forma per agganciarlo ad ogni elemento di tipo li all'interno della pagina:

JavaScript

$("body").on( "click", "li", function( event ) {
  alert("hai premuto il pulsante");
});
Alcuni degli venti possibili sono: blur, change, click, dblclick, focus, hover, keydown, keypress, keyup, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, ...

Vedi : http://api.jquery.com/on/

Modificare un attributo

Per modificare un attributo uso il metodo attr:

JavaScript

// leggo
var s = $("#mio-elenco").attr("class");
// scrivo
$("#mio-elenco").attr("class", "newValue");
// scrivo più attributi
$('#mio-elenco').attr({
  class: 'newClass',
  title: 'Titolo di esempio'
});
Vedi: https://api.jquery.com/attr/

Aggiungere e togliere una classe

Per aggiungere una classe uso il metodo addClass e per rimuoverla removeClass:

JavaScript

$("#mio-elenco").removeClass("myClass1 myCalss2").addClass("myNewClass");
Nota che i metodi possono essere concatenati uno dopo l'altro. Ogni metodo restituisce una collection di elementi.
Mentre per verificare se ha una specifica classe uso il metodo hasClass:

JavaScript

$("ul#mio-elenco").hasClass( "ul-esempio" )
Vedi: https://api.jquery.com/category/attributes/

Nascondere o visualizzare deli elementi

In questo caso i metodi da usare sono hide per nascondere (proprietà display settata a none) e show per visualizzare:

JavaScript

// nascondo
$("#mio-elenco").hide();
// visualizzo
$("#mio-elenco").show();
esiste anche toggle che inverte lo stato visualizzato / nascosto:

JavaScript

// nascondo / visualizzo alternativamente
$("#mio-elenco").toggle();
Vedi: https://api.jquery.com/category/effects/basics/

Aggiungere e togliere un elemento dal DOM

Posso aggiungere elementi alla fine con append:

JavaScript

// per aggiungere
$(".ul-esempio").append("<li>new</li>");
o inserirli in una specifica posizione con insertAfter (dopo l'elemento) o insertBefore (prima dell'elemento):

JavaScript

$("body").on( "click",  function( event ) {
  //conto gli elementi h2
  var i = $("h2").length;
  // inserisco il nuovo
  $("<h2>Nuovo " + i + "</h2>").insertAfter(".ul-esempio");
});
oppure rimuovere degli elementi:

JavaScript

$("h2").remove();

Filtrare gli elementi

Combinando i selettori posso filtrare e farmi ritornare solo gli elementi che interessano:

JavaScript

$("ul#mio-elenco li")
in questo caso sto prendendo tutti gli elementi li sotto (c'è uno spazio prima di li) un elemento ul che ha come id mio-elenco (ul e id sono uniti, non c'è spazio tra gli identificatori).

Che posso scrivere in un altro modo usando il metodo find

JavaScript

$("ul#mio-elenco").find("li")
Oppure posso selezionare solo gli elementi che hanno un attributo contenente uno specifico valore

JavaScript

$("ul").find("li[title='Elemento 2']")
in questo caso ritorna tutti gli elementi li che hanno l'attributo title uguale al valore 'Elemento 2' all'interno di un generico tag ul.

Un altra possibilità è farsi ritornare solo il primo elemento tramite il selettore :first-child:

JavaScript

$("ul li:first-child")
oppure

JavaScript

$("ul li").first()
Attenzione al due punti : fa parte del selettore
Vedi : https://api.jquery.com/filter/ , https://api.jquery.com/category/sele...r-selectors/ , https://api.jquery.com/first/

Cliclare su più elementi

Una selezione JQuery può ritornare più elementi (collection).
Quando si vuole ciclare sugli elementi ritornati per eseguire del codice per ogni elemento della collection, si può usare il metodo each:

JavaScript

$(".ul-esempio li").each(function( index, element) {
  // this == element
  console.log( index + ": " + $(this).text() );
});
in questo esempio visualizzo nella console del browser una riga per ogni elemento li.
L'oggetto this corrisponde al secondo parametro della funzione, ovvero element. Contiene l'elemento html corrente all'interno del ciclo. Si tratta di un elemento del DOM, non di un elemento JQuery. Per convertirlo si usa l'espressione $( element ) o $( this )
Posso usarlo anche in una forma semplificata senza i parametri della funzione e con l'uso di this:

JavaScript

$(".ul-esempio li").each(function() {
  console.log( $(this).text() );
});

Vedi: https://api.jquery.com/each/
La console del browser o developer toobar può essere visualizzata con il tasto F12 oppure dall'apposita voce di menu.
L'uso di console.log è molto più pratico rispetto ad alert in quanto, nel caso di molti elementi, non costringe a fare molti click per chiudere il popup. Inoltre, in caso di dimenticanza, non rovina l'esperienza d'uso dell'utente.

Chiamate asincrone AJAX

JQuery mette a disposizione la funzione AJAX per gestire il recupero dati dal server tramite le chiamate asincrone.
Questa è una chiamata AJAX in formato Json (contentType e dataType):

JavaScript

var postUrl = "/mioPath/mioServizio";
var postData = {
    id: 1,
    text: "Prova post"
};

$.ajax({
    method: "POST", // in alternativa GET
    url: postUrl ,
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(postData)
})
   .done( function(results) {
        console.log("OK", results);
    })
    .fail( function( jqXHR, textStatus, errorThrown ) {
        console.log( "Error", textStatus, errorThrown );
    });

Per un approfondimento vedi la documentazione ufficiale https://api.jquery.com/
Tags:
AJAX14 Esempi224 HTML 554 JavaScript184 JQuery33
Potrebbe interessarti anche: