jQuery document ready

In questo articolo vedremo come utilizzare jQuery document ready.

Per specificare che le funzioni, con le relative istruzioni, devono essere eseguite dopo il caricamento della pagina, si utilizza questa funzione:

$(document).ready(function() {

….

});

Infatti il metodo ready esegue il codice contenuto nella relativa funzione solo quando il documento è stato interamente caricato, ovvero quando la pagina è pronta.

Oppure più semplicemente posso scrivere:

$(function() {

….

});

Esempio d’uso di jQuery document ready e slideToggle()

Facciamo subito un semplice esempio d’uso.

Premete il pulsante sotto, vedrete che la scritta Coding Creativo scomparire. Dopo ricliccate sul pulsante per farla di nuovo apparire.

Coding Creativo


Costruiamo il nostro esempio inserendo innanzitutto il livello da mostrare e nascondere e il pulsante su cui premere per ottenere l’effetto.

<div id="nascondi">Coding Creativo</div>
<button id="premi">Premi il pulsante per nascondere e mostrare il testo</button>


Per sviluppare questo esempio abbiamo dunque bisogno del metodo slideToggle() che mostra o nasconde un determinato oggetto.

Quindi basterà questo semplicissimo script:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#premi").click(function(){
    $("#nascondi").slideToggle();
  });
});
</script>

Ricordiamo che al posto di utizzare $(document).ready(function() avremmo potuto scrivere semplicemente $(function().


SlideToggle()

Il metodo slideToggle() può avere dei parametri:

Velocità – posso specificare la velocità con cui nascondere o mostrare un oggetto. Questi valori possono essere: slow, fast, normal. Ad esempio slideToggle(“slow”). Normal è chiaramente il valore di default, da specificare solo quando si vuole una variazione ad un effetto applicato in precedenza. Si può anche esprimere un valore in millisecondi, normal corrisponde a 400 millisecondi. Ovviamente valori inferiori renderebbero l’effetto più veloce.

Modalità – swing o linear. Swing vuol dire che la velocità è lenta all’inzio e alla fine dell’effetto, ma veloce nel mezzo. Linear invece è il valore di default che indica una velocità costante per tutto il tempo.

Function(), cioè la funzione da eseguire quando si attiva il metodo.

Questi parametri sono opzionali e si possono utilizzare anche singolarmente.


Facciamo alcuni esempi di utilizzo di slideToggle() con parametri

Questa volta cliccate sul pulsante e attendete l’apertura della finestra di dialogo.

Coding Creativo

Per realizzare questo esempio ho nuovamente inserito il div con il pulsante sotto.

<div id="nascondo">Coding Creativo</div>
<button id="pulsante">Prova del pulsante</button>

E dopo ho inserito il semplicissimo script per nascondere il livello (div) e far aprire la finestra di dialogo con alert().

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#pulsante").click(function(){
    $("#nascondo").slideToggle(900, function(){
      alert("Prova del metodo slideToggle su Coding Creativo");
    });
  });
});
</script>

Potete trovare anche altre documentazioni interessanti sul sito w3scholl e anche su apijquery.com.

Questi sono solo alcuni esempi realizzati utilizzando jQuery document ready e slideToggle().

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript


Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *