jQuery removeClass() method permette di rimuovere una classe (remove class) da un elemento selezionato.
La sintassi è dunque questa:
.removeClass (nome_classe, funzione (index, classe_corrente))
Dove nome_classe e funzione hanno le stesse caratteristiche del metodo addClass(), che abbiamo studiato nella lezione precedente: addClass().
Esempio di utilizzo di jQuery removeClass()
Analizziamo un primo esempio di utilizzo del metodo removeClass().
Coding Creativo. Primo paragrafo
Blog sul coding. Secondo paragrafo.
Per realizzare l’esempio inseriamo due paragrafi e un pulsante:
<p class="paragrafo" id="par1">Coding Creativo. Primo paragrafo</p>
<p class="paragrafo2" id="par2">Blog sul coding. Secondo paragrafo.</p>
<button id="rimuovi">Rimuoviamo la classe al secondo paragrafo</button>
Il secondo paragrafo ha la classe=”paragrafo2″ che è quella che vogliamo cancellare. Quindi vado a creare nel foglio di stile la classe di riferimento. Dò un colore al testo, allo sfondo e imposto anche il padding. Posso creare anche a titolo d’esempio un foglio di stile interno.
Il metodo removeClass() può essere utilizzato anche insieme ad addClass().
Vediamo un esempio in cui rimuovo una classe e ne associo un’altra.
Coding Creativo. Primo paragrafo
Blog sul coding. Secondo paragrafo.
In questo secondo esempio dunque ho dato la formattazione del primo paragrafo anche al secondo dopo aver premuto sul pulsante, cancellando quella presente.
Per realizzare l’esempio basta modificare l’esercizio precedente impostando:
Se provate a cliccare sul pulsante, vedrete cambiare i colori di alcune voci dell’elenco puntato. In particolare quelli per cui l’indice diviso due dà resto zero, cioè per gli indici di posto pari, sarà rimossa la classe lista e quindi assumeranno il colore di default.
Scratch
Algobuild
Linguaggio C
JQuery
HTML
CSS
Per realizzare questo esempio creiamo il nostro elenco puntato e dopo inseriamo il pulsante sotto. Ad esempio:
jQuery addClass() method – Questo metodo aggiunge una classe (add class), o anche più di una, ad uno o più elementi di una pagina web.
Quindi, ad esempio, se ho un paragrafo e voglio aggiungere una formattazione diversa, dopo un determinato evento, lo posso fare utilizzando il metodo addClass().
La sintassi è dunque questa: addClass(nome_classe, funzione (index, classe_corrente) ).
Dove il nome_classe specifica una o più classi da attribuire ad un elemento, mentre la funzione riceve quindi, come argomenti, la posizione dell’indice e il nome della classe corrente (ovvero quella esistente) che può essere opzionale.
Ma facciamo subito degli esempi per capire il funzionamento del metodo addClass().
Esempio 1 di utilizzo di jQuery addClass() method
Modifichiamo del testo al click del pulsante, aggiungendo una classe ad un elemento.
Cliccate quindi sul pulsante sotto. Noterete che solo il testo del primo paragrafo si modificherà.
Coding Creativo. Questo paragrafo cambierà.
Blog dove trovare articoli sulla programmazione. Questo paragrafo non cambierà.
Procedimento esempio con il metodo addClass()
Sviluppiamo adesso il codice necessario per realizzare questo esempio.
Innanzitutto inseriamo due livelli con il tag div che contengono del testo a piacere e sotto aggiungiamo un pulsante. Al livello (div) a cui vogliamo dare una formattazione diversa diamo poi un id, ad esempio io ho impostato id=”formattazione”.
<div id="formattazione">
Coding Creativo. Questo paragrafo cambierà.
</div>
<div>
Blog dove trovare articoli sulla programmazione. Questo paragrafo non cambierà.
</div>
<button id="pulsante">Clicca sul pulsante</button>
Inseriamo, in un foglio di stile esterno alla pagina web, le regole per la formattazione del testo, in cui specifichiamo la dimensione del testo, il colore e anche il padding.
Infine creiamo in un file a parte con estensione .js una semplicissima funzione che attiva il cambio del testo al clic del pulsante. Basterà aggiungere al livello con id=”formattazione” la classe formatta, che ho creato prima nel foglio di stile, (potevo scegliere qualsiasi altro nome) utilizzando il metodo addClass().
jQuery css() method è il metodo che serve a dare una formattazione ad uno o più elementi di una pagina web. Con jQuery css() infatti posso dare, ad esempio, un colore di sfondo ad un paragrafo oppure un colore di testo ad un titolo e così via.
La sintassi è dunque molto semplice: css(“nome_proprietà“). Dove nome_proprietà è una proprietà dei css, ad esempio color, background-color, ecc.
Oppure si può anche indicare il valore della proprietà seguendo la seguente sintassi: css(“nome_proprietà“,”valore“). Ad esempio posso scrivere come proprietà color e come valore red.
Esempio di utilizzo di jQuery css()
Vediamo, dunque, nel dettaglio, un esempio di utilizzo del metodo jQuery css(), formattando semplicemente dei testi.
Quindi cliccando sul pulsante read more, i paragrafi dell’esempio sotto cambieranno formattazione.
Benvenuti su Coding Creativo! Il testo diventerà verde
Secondo paragrafo. Diventerà grigio
Per realizzare l’esempio precedente innanzitutto aggiungiamo il collegamento alla CDN jQuery nella nostra pagina html, tra il tag di apertura e chiusura di head.
Dopo, nella pagina html, all’interno del tag body, inseriamo i paragrafi a cui vogliamo cambiare la formattazione e il pulsante che genera l’evento.
<div class="testo">
<p id="intro">
Benvenuti su Coding Creativo! Il testo diventerà verde
<p>
<p id="intro2">
Secondo paragrafo. Diventerà grigio
<p>
</div>
<button id="scopri">Read more</button>
Infine creiamo il nostro script utilizzando il metodo css che assegnerà al primo paragrafo il colore del testo rosso e al secondo invece unno sfondo grigio.
Ecco dunque lo script che utilizza il metodo jQuery css() che chiamo ad esempio script.js.
Aggiungiamo infine il collegamento allo script nella pagina html, prima della chiusura del body.
<script src="script.js" charset="utf-8"></script>
Esempio 2 sul metodo jQuery css()
In questo secondo esempio scopriremo come dare più di una formattazione ad un elemento. Ad esempio vogliamo che il primo paragrafo abbia sfondo grigio e testo giallo, dimensione del testo giallo, in grassetto e con distanza del testo dai bordi di 10 pixel.
Poi vogliamo che il secondo paragrafo abbia colore di sfondo verde, testo grigio, dimensione 22 pixel e che sia in corsivo.
<div class="testo">Benvenuti su Coding Creativo</div>
<button id="nascondi">Nascondi</button>
<button id="scopri">Mostra</button>
Infine realizziamo il nostro semplicissimo script che fa uso del metodo show() e anche del metodo hide(). Ho settato le due velocità diverse solo a titolo d’esempio.
Facciamo un altro esempio, in quanto questi metodi trovano applicazione in molte pagine web. Quando ad esempio un testo è troppo lungo e magari inizialmente, per un layout più funzionale, si vuole presentare solo una minima parte, si può cliccare sul pulsante classico read more per leggere tutto il testo.
Bene, fate la prova a cliccare sul pulsante sotto, vi comparirà il nuovo paragrafo in giallo.
Questa volta, per realizzare l’esempio, ho utilizzato anche la proprietà dei css3 display:none, necessaria in questo caso per nascondere un paragrafo.
Quindi aggiungiamo nella nostra pagina questo foglio di stile interno:
Dopo aggiungiamo il div con i due paragrafi, il primo visibile, il secondo inizialmente nascosto. Poi aggiungiamo il pulsante che genera l’evento.
<div class="testo">
<p id="intro">Benvenuti su Coding Creativo! Questo è un testo di introduzione visibile all'inizio della pagina.<p>
<p id="intro2">Questo è il testo aggiunto! Sul blog troverete esempi di scratch, algobuild, c, c++, javascript e tantissimo altro.<p>
</div>
<button id="scopri2">Read more</button>
Infine realizziamo il nostro semplicissimo script che utilizza il jQuery show() method.
//aggiungiamo la libreria jQuery
<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
//script per scoprire un paragrafo nascosto
<script type="text/javascript">
$(document).ready(function(){
$("#scopri2").click(function(){
$("#intro2").show().css("background-color", "yellow");
});
});
</script>
Con la proprietà css(“background-color”, “yellow”) abbiamo impostato uno sfondo giallo. Nella prossima lezione vedremo più in dettaglio questa proprietà.
Lo stesso esempio si poteva realizzare senza l’uso dei CSS interni:
jQuery hide() method – In questa lezione studieremo questo metodo che serve a nascondere uno o più elementi in una pagina web.
Metodo jQuery hide() come si utilizza
Il metodo hide(), come detto prima, nasconde uno o più elementi. Per chi ha dimestichezza con i CSS3, ha la stessa funzionalità della proprietà display:none.
La sintassi del metodo è questa:
selettore.hide(velocità, modalità, funzione)
Così come abbiamo specificato nel metodo slideToggle() visto nell’articolo precedente i parametri hanno queste impostazioni:
Velocità – indica la velocità con cui nascondere un oggetto. I valori che può assumere sono: slow, fast, normal, o anche valori numerici in millisecondi. Ad esempio 400 viene considerato normal. Valori maggiori rallentano la velocità dell’effetto e viceversa i valori minori. Ad esempio un possibile uso può essere hide(“fast”).
Modalità – La modalità può essere swing, il valore di default, che vuol dire che la velocità è lenta all’inizio e alla fine dell’effetto, ma veloce nel mezzo. Oppure linear che invece indica una velocità costante per tutto il tempo.
Function(), indica la funzione da eseguire quando si attiva il metodo.
I parametri indicati sono opzionali e si possono anche utilizzare singolarmente.
Esempio di utilizzo del metodo hide()
Vediamo questo primo semplice esempio d’uso del metodo hide().
Realizzate un pulsante come quello sotto che servirà a nascondere il testo Benvenuti su Coding Creativo. Ma questa volta, a differenza dell’esempio precedente in cui abbiamo utilizzato slideToggle(), il testo non ricompare cliccando sul pulsante.
Benvenuti su Coding Creativo
Questo semplice esercizio sull’uso del jQuery hide() method si realizza intanto includendo la libreria jQuery nella pagina web:
In questo esempio si è deciso di nascondere un livello, ma potremmo fare l’esempio su qualsiasi elemento: un paragrafo, una textarea, un campo di input, ecc…
Provate pure voi a fare degli esempi.
In questa lezione abbiamo visto un uso basilare del jQuery hide() method, nella prossima vedremo come si utilizza il metodo show().
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 ri-cliccate 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.
Ricordiamo che al posto di utilizzare $(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à – swingolinear. Swing vuol dire che la velocità è lenta all’inizio 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 w3schools e anche su api.jquery.com.
Questi sono solo alcuni esempi realizzati utilizzando jQuery document ready e slideToggle().
Commenti recenti