JS Oggetti ed eventi es3 by @AurelianoDC - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

downloadConsente di scaricare file al click di collegamento ipertestuale.
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
srcIndica la provenienza di una risorsa esterna (tramite URL).
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<input>Definisce un area di input per l'invio di dati e informazioni

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Sports Dashboard 2024

Ximena\'s hamburger

Obiettivi futuri.html

Deutsch Plus [Link]

Heads Or Tails Random Tally

Calcolatrice php

Reti Informatiche

ARKO - Artificial Intelligence Kno

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nascondi/Mostra Elemento con jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  <style>
    .mioDiv2 {
      width: 300px;
      height: 300px;
      /* background-color: red; */
      border: 3px solid black;
      transition: background-color 0.5s ease;
    }
  </style>

</head>

<body>

  <!-- Elemento HTML da nascondere/mostrare -->
  <div id="elementoDaNascondereMostrare">Questo è un elemento da nascondere/mostrare.</div>

  <!-- Pulsante per nascondere/mostrare l'elemento -->
  <button id="pulsanteNascondiMostra">Nascondi/Mostra</button>

  <!-- Elemento HTML da manipolare -->
  <div id="mioDiv">Testo iniziale</div>
  <button id="pulsanteModifica">Modifica Testo</button>

  <button id="pulsanteAlert">Pulsante alert</button>

  <div id="risultato"></div>

  <div class="mioDiv">prova prova</div>

  <div id="mioDiv">Testo iniziale</div>

  <button id="avviaAnimazione">Avvia animazione</button>


  <div id="mioDiv2" class="mioDiv2"></div>


  <script src="script.js"></script>
</body>

</html>

//3. Sfrutta jQuery per nascondere un elemento HTML quando un pulsante viene cliccato e mostrarlo quando viene cliccato di nuovo.

// //********************************
// // Svolgimento con JS puro
// //********************************
// // Selezioniamo il pulsante utilizzando document.getElementById() e aggiungiamo un gestore di eventi per il clic utilizzando addEventListener()
// document.getElementById("pulsanteNascondiMostra").addEventListener("click", function() {
//   // All'interno della funzione del gestore di eventi, selezioniamo l'elemento da nascondere/mostrare utilizzando document.getElementById().
//   let elemento = document.getElementById("elementoDaNascondereMostrare");

//   // Verifichiamo lo stato di visualizzazione dell'elemento controllando il valore della proprietà display del CSS.
//   if (elemento.style.display === "none") {
//     // Se l'elemento è nascosto (display === "none"), lo mostriamo settando display a "block". 
//     elemento.style.display = "block";
//   } else {
//     // Altrimenti, se l'elemento è visibile, lo nascondiamo settando display a "none".
//     elemento.style.display = "none";
//   }
// });
// //********************************



//*********************************
//Svolgimento con jQuery
//*********************************
// Attendi il caricamento completo del documento HTML prima di eseguire il codice jQuery
$(document).ready(function() { // Inizia la funzione di callback che verrà eseguita quando il documento HTML è completamente caricato e pronto per l'interazione.
  
  // Aggiungi un gestore di eventi per il clic sul pulsante con ID "pulsanteNascondiMostra"
  $("#pulsanteNascondiMostra").click(function() {
    // Quando il pulsante viene cliccato, questa funzione anonima viene eseguita.
    
    // Il metodo .toggle() di jQuery nasconde o mostra l'elemento con ID "elementoDaNascondereMostrare" a seconda del suo stato attuale.
    // Se l'elemento è visibile, verrà nascosto. Se è nascosto, verrà mostrato.
    $("#elementoDaNascondereMostrare").toggle();
  });// Chiude la funzione di callback per il clic sul pulsante.
}); //Chiude la funzione di callback per il caricamento completo del documento HTML.


//Questa riga $(document).ready(function() {...}); è la sintassi di jQuery per eseguire il codice JavaScript una volta che il documento HTML è completamente caricato. All'interno di questa funzione, definiamo il gestore di eventi per il clic sul pulsante.

// Ogni volta che si usa il simbolo $ in jQuery, si sta effettivamente utilizzando jQuery per selezionare elementi DOM, applicare effetti o gestire eventi.

//*******************************
// jQuery
//*******************************
//jQuery è una libreria JavaScript molto popolare e potente che semplifica notevolmente la scrittura di codice JavaScript e offre una serie di funzionalità che semplificano la manipolazione del DOM, la gestione degli eventi, le chiamate AJAX, le animazioni e molto altro ancora. Ecco alcuni dei principali vantaggi e utilizzi di jQuery:

//1. **Semplificazione della manipolazione del DOM**: 
//jQuery semplifica notevolmente la selezione, la modifica e la manipolazione degli elementi del DOM. Grazie ai selettori CSS-like e ai metodi di manipolazione, è più facile scrivere codice per interagire con gli elementi HTML.
$("#pulsanteModifica").click(function() {
  // Quando il pulsante viene cliccato, questa funzione anonima viene eseguita.

  // Il metodo .text() di jQuery cambia il contenuto nel testo.
  $("#mioDiv").text("Nuovo testo");;
});

//2. **Gestione degli eventi**: 
//jQuery semplifica la gestione degli eventi come il click, il mouseover, il keypress, ecc. Con jQuery, è possibile assegnare gestori di eventi agli elementi HTML in modo più semplice e compatto rispetto a JavaScript puro.
$("#pulsanteAlert").click(function() {
    alert("Hai cliccato il pulsante!");
});

//3. **Chiamate AJAX semplificate**: 
//jQuery fornisce un'interfaccia semplificata per eseguire chiamate AJAX, consentendo di recuperare e inviare dati dal e al server senza dover scrivere complessi codici XMLHttpRequest.
$.ajax({
    url: "dati.json",
    dataType: "json",
    success: function(data) {
        // Visualizza i dati nel div risultato
        $("#risultato").text(JSON.stringify(data));
    }
});

// 4. **Animazioni e effetti**: 
// jQuery fornisce una serie di metodi per creare animazioni e aggiungere effetti speciali agli elementi HTML, rendendo più semplice aggiungere dinamicità e interattività ai siti web.

// Aggiungi un gestore di eventi per il passaggio del mouse sull'elemento
$(".mioDiv").mouseenter(function() {
    // Modifica il colore di sfondo
    $(this).css("background-color", "blue");
    console.log("ci sono sopra con il mouse");
});

// Aggiungi un gestore di eventi per il passaggio del mouse fuori dall'elemento
$(".mioDiv").mouseleave(function() {
    // Ripristina il colore di sfondo originale 
    $(this).css("background-color", "transparent");
    console.log("mi sono tolto sopra con il mouse");
});

// 5. **Compatibilità cross-browser**: 
// jQuery si occupa delle differenze di implementazione tra i vari browser, garantendo che il codice funzioni in modo coerente su tutti i browser principali senza dover scrivere codice specifico per ciascuno di essi.

// 6. **Estensibilità**: 
// jQuery è altamente estensibile attraverso l'utilizzo di plugin. Esistono migliaia di plugin jQuery disponibili per eseguire una vasta gamma di compiti, dall'aggiunta di caroselli di immagini alla creazione di complessi grafici interattivi.
$("#avviaAnimazione").click(function() {
    // Utilizza l'animazione jQuery per modificare il colore di sfondo
    $("#mioDiv2").animate({ backgroundColor: "blue" }, 1000, function() {
        // Callback eseguita al termine dell'animazione
        $("#mioDiv2").animate({ backgroundColor: "red" }, 1000);
    });
});

// In sintesi, jQuery è una libreria potente e versatile che semplifica la scrittura di codice JavaScript, riduce la quantità di codice necessario per svolgere molte operazioni comuni e migliora la produttività degli sviluppatori web. È particolarmente utile per la creazione di siti web interattivi e dinamici.