jQuery in pochi minuti

Scopri in breve come jQuery può semplificare lo sviluppo web, offrendo funzionalità potenti per selezionare elementi, manipolare il DOM, gestire eventi e creare animazioni. Leggi per avere una panoramica rapida di questa popolare libreria JavaScript.

Requisiti alla lezione jQuery in pochi minuti

Bootstrap CDN

Animate.css CDN

jQuery.js CDN

Utilizza il seguente playground per testare il codice che verra’ mostrato

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Per comodità ho già linkato le librerie necessarie nel seguente file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

    <title>jQuery Playground</title>
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
        integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <script>
        <!-- PROVA IL CODICE IN QUESTO ELEMENTO -->
    </script>
    <!-- Code below this line should not be changed -->
    <div class="container-fluid">
        <h3 class="text-primary text-center">jQuery Playground</h3>
        <div class="row">
            <div class="col-xs-6">
                <h4>#left-well</h4>
                <div class="well" id="left-well">
                    <button class="btn btn-default target" id="target1">#target1</button>
                    <button class="btn btn-default target" id="target2">#target2</button>
                    <button class="btn btn-default target" id="target3">#target3</button>
                </div>
            </div>
            <div class="col-xs-6">
                <h4>#right-well</h4>
                <div class="well" id="right-well">
                    <button class="btn btn-default target" id="target4">#target4</button>
                    <button class="btn btn-default target" id="target5">#target5</button>
                    <button class="btn btn-default target" id="target6">#target6</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Animazioni easy con jQuery

$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");

Aggiungere e togliere class CSS

$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");
$("button").removeClass("btn-default");

Modificare le proprietà di un elemento HTML

$("#target1").prop("disabled",true);

Cambiare il testo di un elemento

$("#target4").text("nuovo testo");

Rimuovere un elemento usando jQuery

$("#target4").remove();

Usare appendTo per spostare gli elementi

Sposta il tuo elemento target2 dal left-well al right-well.

$("#target2").appendTo("#right-well");

Clonare un elemento

Clona il tuo elemento target5 e aggiungilo al tuo left-well.

$("#target5").clone().appendTo("#left-well");

Identificare il genitore di un elemento

Dai al genitore dell’elemento #target1 un colore di sfondo rosso.

$("#target1").parent().css("background-color","red");

Identificare i figli di un elemento

Dai a tutti i figli del tuo elemento right-well il colore arancione.

$("#right-well").children().css("color","orange");

Individuare il figlio specifico di un elemento

$(".target:nth-child(2)").addClass("animated bounce");

Nota che gli elementi button hanno anche la classe target

Identificare gli elementi pari e dispari

Dai a tutti gli elementi pari e a quelli dispari le classi animated e shake

$(".target:even").addClass("animated shake");
$(".targer: odd").addClass("animated shake");

Usare jQuery per modificare l’intera pagina

$("body").addClass("animated hinge");

E adesso cosa altro posso fare?

jQuery è una potente libreria JavaScript che offre una vasta gamma di funzionalità per semplificare lo sviluppo web. Alcune delle principali cose che jQuery può fare includono:

Selezionare elementi HTML: Puoi utilizzare selettori simili a CSS per trovare e manipolare facilmente gli elementi nella tua pagina.
Manipolare il DOM: Puoi modificare il contenuto, lo stile e la struttura degli elementi HTML, consentendo di creare dinamicamente pagine interattive.
Gestire eventi: Puoi associare funzioni agli eventi, come il clic di un pulsante o il caricamento di una pagina, per creare comportamenti reattivi e interattivi.
Effetti e animazioni: Puoi creare transizioni fluide, animazioni personalizzate e effetti visivi accattivanti per migliorare l’esperienza dell’utente.
Chiamate AJAX: Puoi effettuare richieste asincrone al server senza dover ricaricare l’intera pagina, consentendo di creare applicazioni web dinamiche.
Manipolare i dati: Puoi manipolare e manipolare facilmente i dati JSON e XML per creare applicazioni web avanzate.
Creare plugin: Puoi estendere le funzionalità di jQuery creando e utilizzando plugin personalizzati, consentendo di riutilizzare il codice in modo efficiente.

In sintesi, jQuery semplifica lo sviluppo web consentendo di scrivere meno codice e ottenere risultati rapidi e interattivi.