JQuery è una libreria JavaScript leggera e divertente che ti consente di manipolare i CS in molti modi diversi attraverso l'uso di vari metodi jQuery. Usando questi metodi è possibile impostare le proprietà di stile degli elementi oppure è possibile aggiungere o rimuovere un determinato nome di classe da un elemento o forse alternare tra l'aggiunta o la rimozione di classi.

I metodi jQuery di seguito vengono utilizzati per manipolare CSS .

1. Metodo CSS ()
2. Metodo addClass ()
3. Metodo Hasclass ()
4. Metodo RemoveClass ()
5. Metodo toggleClass ()

Esploriamoli in dettaglio.

Metodo CSS ()

Il metodo CSS () in jQuery viene utilizzato allo scopo di applicare o recuperare una o più proprietà di stile a un elemento HTML.

Sintassi

css ("proprietà", "valore"); // per impostare una proprietà CSS
CSS ("Proprietà"); // per ottenere una proprietà CSS

Esempio 1

Supponiamo di voler impostare il colore di sfondo di un elemento usando il metodo CSS () in jQuery.

Html

Questo è un po 'di paragrafo

Imposta background-color di Div

Nel codice sopra, tre elementi HTML che sono ,

, e vengono creati.

jQuery

$ (documento).ready (function ()
$ (".pulsante").Click (function ()
$ ("div").CSS ("Background-Color", "Rosybrown");
);
);

Usando il metodo CSS () stiamo cambiando il colore di sfondo dell'elemento solo a clic del pulsante.

Produzione

Il colore di sfondo del div è stato impostato.

Esempio 2

Supponiamo di voler estrarre solo una proprietà di stile di un elemento HTML. Usa il seguente codice.

Html

Qualche paragrafo.

Restituire il carattere delle dimensioni di P

Nel codice sopra,

, ed elementi sono stati creati, inoltre, il

L'elemento è stato dato una dimensione del carattere di 25px.

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
Alert ("Font size =" + $ ("P").CSS ("Font-size"));
);
);

Stiamo usando il metodo CSS () per recuperare la dimensione del carattere del paragrafo. Una volta fatto clic sul pulsante, verrà visualizzato un messaggio di avviso che visualizza la dimensione del carattere del paragrafo.

Produzione

Prima di fare clic sul pulsante.

Dopo aver fatto clic sul pulsante.

La dimensione del carattere del paragrafo è stata estratta.

Metodo addClass ()

Come suggerisce il nome, il metodo jQuery addClass () viene utilizzato per aggiungere nomi di classi singoli o più a un elemento HTML.

Sintassi

$ (selettore).AddClass (ClassName, FuncName (indice, CurrentClass))

Nota: IL nome della classe è un parametro richiesto che indica il nome della classe da aggiungere e il funcname è un parametro opzionale che specifica una funzione per prendere un nome di classe da aggiungere.

Esempio

Supponiamo di aver definito un elemento simile più di una volta in una pagina Web e vuoi aggiungere una classe solo a uno di quegli elementi. Usa il seguente codice.

Html

Primo paragrafo.

Ultimo paragrafo.

Aggiungi un nome di classe all'ultimo paragrafo

Nel codice sopra, ne abbiamo creati due

tag e un elemento.

CSS

.Nota
Font-size: 160%;
colore blu;

Qui abbiamo definito un po 'di stile per una "nota" di classe.

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("p: ultimo").addClass ("Nota");
);
);

Nel codice sopra, una classe viene aggiunta dal nome "Nota" all'ultimo

elemento. Pertanto, sul pulsante Click del pulsante, lo stile definito per la classe Note verrà applicato all'ultimo paragrafo.

Produzione

La classe "Note" è stata aggiunta con successo all'ultimo paragrafo.

Metodo Hasclass ()

Ai fini di valutare se un elemento ha una classe o meno, viene utilizzato il metodo Hasclass (). Questo metodo visualizza vero se rileva qualsiasi classe o altrimenti falso.

Sintassi

$ (selettore).Hasclass (ClassName)

Nota: IL nome della classe è un parametro richiesto che viene utilizzato per specificare un nome di classe da cercare.

Esempio

Supponiamo di voler controllare se c'è una classe applicata a una certa serie di elementi simili. Ecco come lo fai.

Html

Un paragrafo.

Un altro paragrafo.

Qualsiasi elemento p ha una classe "principale"?

In questo codice HTML, ne abbiamo creati due

elementi e un elemento. Oltre a questo, il primo

Element è stata assegnata la classe "principale".

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
Avviso ($ ("P").Hasclass ("main"));
);
);

Nel codice sopra, è stato progettato un messaggio di avviso che restituirà vero quando il metodo Hasclass () rileva una classe con il nome di "Main".

Produzione

Il metodo Hasclass () funziona correttamente.

Metodo RemoveClass ()

Ai fini della rimozione di un nomi di classi singoli o di più da elementi HTML, viene utilizzato il metodo REMOVECLASS ().

Sintassi

$ (selettore).REMOVECLASS (ClassName, FuncName (indice, CurrentClass))

Nota: IL nome della classe Il parametro specifica il nome della classe da rimuovere e il funcname Il parametro specifica una funzione che recupera i nomi di classi singoli o più. Entrambi sono parametri opzionali.

Esempio

Supponiamo di voler rimuovere una classe da un certo elemento HTML. Usa il codice qui sotto.

Html

Intestazione 1

Intestazione 2

Intestazione 3

Rimuovi la "testa" di classe dall'elemento H1.

Abbiamo creato quattro elementi HTML che sono

,

,

, E . Inoltre, abbiamo applicato una "testa" di classe al

elemento.

CSS

.Testa
opacità: 0.4;

La testa di classe ha ricevuto un po 'di stile attraverso CSS.

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("H1").rimoveclass ("testa");
);
);

Nel codice sopra, è stato applicato RemoveClass () per rimuovere la classe "Head" da

elemento.

Produzione

La classe "Head" è stata rimossa da

elemento.

Metodo toggleClass ()

Questo metodo cambia tra l'aggiunta o la rimozione dei nomi di classi singoli o più da elementi HTML. Funziona in modo tale che aggiunga i nomi di classe a quegli elementi in cui manca e rimuove i nomi di classe da quegli elementi in cui è già stato impostato.

Sintassi

$ (selettore).ToggleClass (ClassName, FuncName (indice, CurrentClass), TUTTING)

Nella sintassi sopra:

• IL nome della classe è un parametro richiesto che viene utilizzato per specificare un nome di classe da aggiungere o rimuovere da un elemento.
• IL funcname parametro Specificare una funzione che recupera un nome di classe da aggiungere o rimuovere.
• D'altra parte, il interruttore Il parametro è a booleano Valore che dice se il nome di una classe deve essere aggiunto (true) o rimosso (falso).

Entrambi funcname e attiva sono parametri opzionali.

Esempio

Supponiamo di voler attivare un nome di classe tra più elementi HTML. Segui il codice qui sotto.

Html

Intestazione 1

Intestazione 2

Intestazione 3

Interruttore

Vengono creati quattro elementi HTML che sono

,

,

, E .

CSS

.Testa
colore blu;
opacità: 0.3;

Usando CSS, una classe con il nome "Head" è stato dato un po 'di stile.

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("H1, H2, H3").toggleClass ("testa");
);
);

Nel codice sopra, la classe "Head" è attivata tra

,

, E

elementi.

Produzione

È necessario fare clic sul pulsante più volte per vedere l'effetto attivato.

La classe a levetta funziona correttamente.

Conclusione

I CS possono essere manipolati attraverso l'uso di vari metodi jQuery che sono; Il metodo CSS () si applica o recupera una o più proprietà di stile di un elemento, il metodo AddClass () aggiunge nomi di classe agli elementi, l'Hasclass () rileva se un elemento ha una classe o no, il removeClass () rimuove i nomi delle classi da elementi e toggleclass () switch tra l'aggiunta o la rimozione dei nomi delle classi da elementi. Questi metodi sono spiegati in dettaglio con l'aiuto di esempi pertinenti.