jQuery. Come modificare le proprietà CSS, classi e gli attributi del elemento.

Libreria jQuery permette di modificare le proprietà e gli attributi dell'elemento scelto modificando il valore iniziale. Da la possibilità di aggiungere nuove funzionalità, ricevere e modificare i valori delle proprietà originali. Con la rimozione o l'aggiunta di classi, è possibile modificare in modo dinamico lo stile degli elementi nel momento di visualizzazione

Modificare  proprietà e  attributi di elementi in una pagina web con jQuery

1. Aggiungere una classe

1.1. Metodo .addClass ()

Aggiunge  classe specificata (o più classi) ad ogni elemento selezioanta dalla funzione jQuery. Che questo metodo funzioni è necessario creare prima la classe che vogliamo agiungere ad un elemento. Il metodo non rimuove la vecchia classe, ma semplicemente aggiunge una nuova.

.addClass (className )
nome di classe - uno o più nomi di classe, separati fra di loro  con un semplice spazio.
.addClass (function(index, currentClass))
Tipo: function
Aggiunge classi, un elenco di quali restituisce la funzione definita dall'utente. Il valore di ritorno deve essere  una stringa con un elenco di classi da aggiungere separati dallo spazio. La funzione viene chiamata per ognuno degli elementi selezionati. Al richiamo a function vengono trasmesi seguenti parametri: index - posizione dell'elemento nel insieme, classe - la classe(i) corrente dell'elemento.

È importante sotolineare che questo metodo non sostituisce classi. Con questo metodo  agiungiamo una altra classe ai classi gia presenti.

Allo stesso tempo, si può aggiungere uno o piu classi css separati da uno spazio:

$("p").addClass("myClass yourClass");/* a tutti I paragrafi "p" agiungere myClass e youClass

Spesso in combinazione con il metodo citato sopra utilizzano metodo .removeClass () per rimuovere classi esistenti e aggiungere altre :

$("p").removeClass("myClass(colore) noClass(grandezza)").addClass("yourClass(nuovo colore)");

In questo esempio, al paragrafo vengono tolti due classi presenti myClass e noClass e asegnata un altra classe yourClass. Con questo posiamo rimovere un colore per il testo, come esempio, e asegnare un altro

Dalla versione jQuery 1.4, metodo.addClass () come argomento può assumere una funzione ( cio e, per esempio agingere non solo una classe o piu classi ma creare una condizione e in base di essa agiungere dei classi)

$("ul li").addClass(function(index) {
return "item-" + index;
});

Abbiamo un elenco non ordinato(<ul>) che posiede due elementi <li>. In questo esempio, al primo sara aggiunta la classe "item-0" ed al secondo <li> la classe "item-1".

Esempio. Aggiungere la classe "selected" per gli elementi che corrispondono al selettore.

<!DOCTYPE html>
<html>
<head>
 <style>
 p { margin: 8px; font-size:16px; }
 .selected { color:blue; }
 .highlight { background:yellow; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Hello</p>
 <p>and</p>
 <p>Goodbye</p>
<script>
 $("p").last().addClass("selected");/* scegliere ultimo paragrafo dal esempio ed agiungere ad esso la classe .selected*/
 </script>
</body>
</html>

Demo:

Ciao

e

Arrivederci

Esempio: Aggiungere la classe "selected" e "highlight" per elementi che corrispondono al selettore.

<!DOCTYPE html>
<html>
<head>
 <style>
 p.prova2{ margin: 8px; font-size:16px; }
 .selected { color:red; }
 .highlight { background:yellow; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <p class=”prova2”>Hello</p>
 <p>and</p>
 <p>Goodbye</p>
<script>
 $("p:last").addClass("selected highlight");
 </script>
</body>
</html>

Demo:

Ciao

e

Arrivederci

Esempio: Trasmetiamo in .addClass () una funzione, che trovera un elemento che ha la classe "red" e agiunge ad esso la classe  "green".

<!DOCTYPE html>
<html>
<head>
 <style>
 div { background: white; }
 .red { background: red; }
 .red.green { background: green; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>Questo div dovrebbe essere bianco</div>
 <div class="red">Questo div puo essere verde perche adesso ha classi  "green" e "red" .
 Ma puo essere anche rosso se la funzione per  metodo  addClass falisce.</div>
 <div>Questo div dovrebbe essere bianco</div>
 <p class="prova3">Qui non ci sono div verdi </p>
<script>
 $("div").addClass(function(index, currentClass) {
 var addedClass;
if ( currentClass = "red" ) {
 addedClass = "green";
 $("p.prova3").text("Qui c'e un div colorato di verde, che prima non c'era ");
 }
return addedClass;
 });
</script>
</body>
</html>

Demo

Questo div dovrebbe essere bianco
Questo div puo essere verde perche adesso ha classi "green" e "red" . Ma puo essere anche rosso se la funzione per metodo addClass falisce.
Questo div dovrebbe essere bianco

Qui non ci sono div verdi

 

1.2 Metodo .removeClass Rimuovere classi

.removeClass ()
Rimuove tutte le classi ad elementi selezionati.
.removeClass ([className])
className
classNameOne - indicare il nome della classe (i nomi di classi, separati da spazi) che si desidera eliminare ad ogni elemento schelto.
.removeClass (function (indice, class))
function (indix, class)
Rimuove le classi, elenco dei quali restituisce la function indicata fra le parentesi, classi devono essere separati da uno spazio. La function viene chiamata per ognuno degli elementi selezionati. Ad essa vengono trasmessi seguenti parametri: indix (posizione dell'elemento nel set) e class (la classe(i) corrente(i) dell'elemento).

Se si specifica  nome della classe, solo questa classe sara rimossa. Se non sono specificati classi, tutte le classi verranno eliminati.

Si possa rimuovere piu classi, separati da uno spazio:

$('p').removeClass('myClass yourClass')

Questo metodo può essere utilizzato con il metodo .addClass ():

$('p').removeClass('myClass noClass').addClass('yourClass');

Classi myClass e noClass saranno eliminati e sara aggiunta la classe yourClass.

Per sostituire tutti classi si può usare il metodo .attr ( 'classe', 'NewClass').

Dal jQuery 1.4, il metodo .removeClass () si usa per rimuovere le classi in una funzione separata.

$('li:last').removeClass(function() {
 return $(this).prev().attr('class');
});

Vediamo esempi

<p class="blue under">Hello</p>
 <p class="blue under highlight">and</p>
 <p class="blue under">then</p>
 <p class="blue under">Goodbye</p>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>$("p:even").removeClass("blue");</script>

Rimuovere più classi

 <p class="blue under">Hello</p>
 <p class="blue under highlight">and</p>
 <p class="blue under">then</p>
 <p class="blue under">Goodbye</p>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>$("p:odd").removeClass("blue under");</script>

Rimuovere tutti i classi ad elemento scelto

 <p class="blue under">Hello</p>
 <p class="blue under highlight">and</p>
 <p class="blue under">then</p>
 <p class="blue under">Goodbye</p>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>$("p:eq(1)").removeClass();</script>

 

1.3. Metodo .toggleClass ()

Aggiunge o elimina una o più classi ad elemento. Ogni elemento indicato nella funzione  viene verificato singolarmente. Il metodo aggiunge la classe specificata se un elemeto non la posiede , oppure rimuove la classe agli elementi in cui è presente. Viene utilizzato per cambiare la presentazione visiva del elemento.

.toggleClass (className)
    nome di classe - uno o più nomi di classe separati da spazi, che saranno aggiunti o eliminati  per ogni elemento del set.
.toggleClass (className, switch)
    nome di classe - uno o più nomi di classe separati da spazi, che saranno aggiunti o eliminati  per ogni elemento del set.    switch– dice se si deve aggiungere o rimuovere la classe specificata. Valore switch= true, aggiunge la classe, switch = false  – rimuove.
.toggleClass ([switch])
     valore booleano - parametro opzionale determina se vverano agiunti o eliminati classi per ogni elemento del set.
.toggleClass (function(index, class, switch) [, switch])
    Cambia classi,  un elenco dei quali restituisce funzione function in forma della stringa  con un elenco di classi separate da uno spazio. La funzione viene chiamata per ognuno degli elementi selezionati. Quando viene chiamata ad esso vengono  trasmesso index - la posizione dell'elemento nel set e classe - la classe(i) corrente  dell'elemento. switch determina se le classi vanno  aggiunti (true) o vanno rimossi (false)

Questo metodo aggiunge o rimuove una classe ad un elemento come abbimo gia detto sopra .  Ad esempio, posiamo applicare  .toggleClass () ad un semplice <div>:

<div class="tumble">Some text.</div>

Al inizio, aplicando seguente funzione  $('div.tumble').toggleClass('bounce') , otteremo la seguente:

<div class="tumble bounce">Some text.</div>

 E se utilizeremo per seconda volta  $('div.tumble').toggleClass('bounce') , La classe  .bounce sara eliminata dal <div> :

<div class="tumble">Some text.</div>

E se faciamo la stessa cosa con   .toggleClass('bounce spin')  per lo stesso <div> si ottiene  seguente codice <div class="tumble bounce spin">  e se utilizeremo di nuovo otteremo  <div class = "tumble">.

Un altra caso per utilizzo del metodo .toggleClass () ,  è indicare con precisione aggiungere o rimuovere una classe. Se il parametro è true , la classe sara agiunta ; se false, verrà rimossa. Esempio:

$('#foo').toggleClass(className, addOrRemove);

questo è uguale a:

if (addOrRemove) {
    $('#foo').addClass(className);
  }
  else {
    $('#foo').removeClass(className);
  }

Dal jQuery 1.4, si possa  scrivere una sola  funzione per determinare quale classe si desidera aggiungere al'elemento.

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar')) {
    return 'happy';
  } else {
    return 'sad';
  }
});

In questo esempio, se l'elemento <div class = "foo"> posiede gia la classe bar, si aggiunge  la classe happy; altrimenti la classe sad.

Esempi in pratica

Esempio: aggiungere o rimuovere la classe 'highlight'(sotolineare con giallo)  al clic sul elemento.

<style>
 .blue1 { color:blue;cursor:pointer; }
 .highlight { background:yellow; }
 </style>
 
 <p class="blue1">Click to toggle</p>
 <p class="blue1 highlight">highlight</p>
 <p class="blue1">on these</p>
 <p class="blue1">paragraphs</p>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
   $("p.blue1").click(function () {
     $(this).toggleClass("highlight");
   });
</script>

Demo

Prova di clicare per vedere come funziona

Clica per cambiare

evidenziare

rige in questo

paragrafo

Esempio: aggiungere una classe "highlight" ad ogni terzo clic; eliminare ad ogni secondo.

<style>
 .blue { color:blue; cursor:pointer;}
 .highlight { background:red; }
 </style>
 
 <p class="blue">Clica per cambiare  (<span>clicks: 0</span>)</p>
 <p class="blue highlight">evidenziare (<span>clicks: 0</span>)</p>
 <p class="blue">on these (<span>clicks: 0</span>)</p>
 <p class="blue">paragraphs (<span>clicks: 0</span>)</p>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var count = 0;
$("p").each(function() {
 var $thisParagraph = $(this);
 var count = 0;
 $thisParagraph.click(function() {
   count++;
   $thisParagraph.find("span").text('clicks: ' + count);
   $thisParagraph.toggleClass("highlight", count % 3 == 0);
 });
});
</script>

Clica per cambiare (clicks: 0)

evidenziare (clicks: 0)

on these (clicks: 0)

paragraphs (clicks: 0)

1.4. Metodo .hasClass ()

Controlla se almeno un elemento nel set  ha la classe indicata fra le parentesi . Restituisce true, se almeno uno degli elementi dela colezione  ha il nome della classe, altrimenti – false.

.hasClass (className)
    nome di classe - la stringa con il nome della classe per la ricerca.

Gli elementi possono avere uno o più classi. In HTML, le classi sono separati da uno spazio vuoto:

<div id="mydiv" class="foo bar"></div>

Metodo .hasClass () restituisce true se l'elemento ha la classe cercata e false nel caso contrario. Ad esempio, se prendiamo in esame il codice  HTML, che abbiamo citato sopra , questo metodo ci restituira  true in casi come questi

$('#mydiv').hasClass('foo')

  e  anche

$('#mydiv').hasClass('bar')

e  false se chediamo di controlarepresenza della classe “quux”:

$('#mydiv').hasClass('quux')

Esempio

Vediamo di effetuare la ricerca di un paragrafo con la classe 'selected ':

<style>
.selected { color:red; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <p>Questo paragrafo scritto in nero ed è il primo paragrafo</p>
 <p class="selected">Questo paragrafo e scritto in rosso ed è il secondo paragrafo</p>
 <div id="result1">Il primo paragrafo ha la classe del metod  hasClass cercato:  </div>
 <div id="result2">Il secondo paragrafo ha la classe del metodo  hasClass cercato:  </div>
 <div id="result3">L'ultimo paragrafo ha la classe del metoda  hasClass cercato:  </div>
<script>
$("div#result1").append($("p:first").hasClass("selected").toString());/*Selezionare ("div#result1") e agiungere ad esso(.append) risultato della funzione indicata ,cio e  della verifica  false(non posiede) o true(posiede)  dopo il  metodo applicato hasClass  che dovrebbe verificare il primo paragrafo ("p:first") alla presenza del classe "selected" e il risultato agiungere in forma della stringa (agiungere al testo esistente) se tradurere il codice jQuery in lingua comune */
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>

Questo paragrafo scritto in nero ed è il primo paragrafo

Questo paragrafo e scritto in rosso ed è il secondo paragrafo

Il primo paragrafo ha hasClass cercato:
Il secondo paragrafo ha hasClass cercato:
L'ultimo paragrafo ha hasClass cercato:

2. Modificare attributo d'elemento

Il metodo riceve il valore del attributo del  elemento o  imposta uno o più valori del attributo per una colezione  di elementi in selezione .

2.1. Metodo .attr ()

.attr (attributeName)
    Il nome dell'attributo che si desidera ottenere.
.attr( attributeName, value )
nome attributo - Specifica il nome dell'attributo per il quale si imposterà il valore specificato.
    valore(value) - una stringa o un numero che saranno aggiunti  come un valore di attributo per tutti gli elementi del set selezionato.
.attr (attributi)
attributi - valori che vengono copiati dalle proprietà dell'oggetto e dopo saranno impostati per tutti gli elementi del set.
.attr (attributeName, function(index, attr))
    nome attributo - Specifica il nome dell'attributo per il quale si imposterà il valore specificato.
   function(index, attr)  -  al attributo attributeName sara impostato su un valore restituito dalla function. Quando viene richamata ad esso vengono pasati seguenti parametri : indix (posizione dell'elemento nel set) e il value (il valore corrente dell'attributo attributeName dell'elemento).

Metod.attr () ottiene il valore dell'attributo del primo elemento che incontrerà. Per ottenere valore di ciascuno degli elementi si dovrà utilizzare  costruzioni come .each () o .map ().

Dal jQuery 1.6, .attr () restituisce undefined per gli attributi che non sono stati impostati. Per ottenere e impostare un valore per opzioni come checked, selected, o disabled  si usa metodo .prop ().

Esempi

Esempio: visualizzare lo stato dell'elemento nel modulo.

<input id="check1" type="checkbox" checked="checked">
<label for="check1">Scegli mi</label>
<p></p>/*abbiamo inserito un paragrafo per inserire in esso stringa nel formato html ottenuta come risultato di funzionamento del nostro script jQuery  */
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("input").change(function() {
 var $input = $(this);
 $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
             + ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
             + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();
</script>

Esempio: ottenere attributo del  title del  primo elemento  <em>

<style>
 em { color:blue; font-weight:bold; }
 div { color:red; }
</style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>
 Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
 The title of the emphasis is:<div></div>
<script>
var title = $("em").attr("title");
 $("div").text(title);
</script>

Qui c'era un grande dinosauro...

Il title del em è:

Impostare  vari attributi contemporaneamente

Per modifica e impostazione di più attributi, utilizeremo un semplice  JavaScript  oggetto con tipo chiave: valore. Ogni chiave - un attributo:

$('#greatphoto').attr({
 alt: 'Beijing Brush Seller',
 title: 'photo by Kelly Clark'
});

Creazione dinamica valori di attributi

Con la funzione, possiamo creare un valore di attributo in maniera dinamica utilizzando i valori esistenti. Ad esempio, vedimo di  espandere il valore esistente del  attributo title dal esempio precedente :

$('#greatphoto').attr('title', function(i, val) {
 return val + ' - photo by Kelly Clark'
});

Questo può essere utile per modificare gli attributi di tanti elementi.

Esempi

Esempio: Asegniare gli attributi a tutti elementi <img> sulla pagina.

<style>
 img { padding:10px; }
 div { color:red; font-size:24px; }
</style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <img />/*abiamo 3 tag img senza nessun attributo */
 <img />
 <img />
 <div><B>Attribute of Ajax</B></div>
<script>
$("img").attr({
 src: "/resources/hat.gif",/* agiungiamo attributo src con indiaczione percorso della immagine */
 title: "jQuery",/* agiungiamo anche atribbuto title per ogni img*/
 alt: "jQuery Logo"/* e attributo alt che descrive la nostra immagine al passagio del puntatore sopra */
});
$("div").text($("img").attr("alt"));/* e con questa stringa dicimo di sostituire nel div il testo con il testo contenente nel attributo alt*/
</script>

Attribute of Ajax

Esempio: impostare il valore dell'attributo src, a seconda del valore del  attributo title.

<img title="hat.gif"/>/*abbimo elemento img con attributo title */
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("img").attr("src", function() {/*con questo codice stiamo dicendo di selezionare elemento img e nei attributi agiungere attributo src che sara ugale  al valore del atributo title cosi indiceheremo il percorso per immgine da visualizzare */
   return "/resources/" + this.title;
});
</script>

Letto 2345 volte