JQuery er et lett og morsomt JavaScript -bibliotek som lar deg manipulere CSS på mange forskjellige måter gjennom bruk av forskjellige jQuery -metoder. Ved hjelp av disse metodene kan du angi stilegenskapene til elementer, eller du kan enten legge til eller fjerne et visst klassenavn fra et element, eller kanskje veksle mellom å legge til eller fjerne klasser.

De under-nevnte jQuery-metodene brukes til å manipulere CSS .

1. CSS () -metode
2. addClass () -metode
3. hasclass () -metode
4. RemovelClass () Metode
5. ToggleClass () -metode

La oss utforske dem i detalj.

CSS () -metode

CSS () -metoden i jQuery brukes til å enten bruke eller hente en eller flere stilegenskaper til et HTML -element.

Syntaks

CSS ("eiendom", "verdi"); // for å sette en CSS -eiendom
CSS ("eiendom"); // for å få en CSS -eiendom

Eksempel 1

Anta at du vil angi bakgrunnsfargen til et element ved hjelp av CSS () -metoden i jQuery.

Html

Dette er noe avsnitt

Sett bakgrunnsfarge av div

I koden ovenfor, tre HTML -elementer som er ,

, og blir opprettet.

jQuery

$ (dokument).klar (funksjon ()
$ (".knapp").klikk (funksjon ()
$ ("Div").CSS ("bakgrunnsfarge", "rosybrown");
);
);

Ved å bruke CSS () -metoden endrer vi bakgrunnsfargen på elementet bare ved klikk på knappen.

Produksjon

Bakgrunnsfargen på diven er satt.

Eksempel 2

Anta at du bare vil hente ut en stilegenskap til et HTML -element. Bruk følgende kode.

Html

Noe avsnitt.

Returner fontstørrelse på P

I koden ovenfor,

, og elementer er opprettet, dessuten

elementet har fått en skriftstørrelse på 25px.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
Alert ("Font Size =" + $ ("P").CSS ("Font-size"));
);
);

Vi bruker CSS () -metoden for bare å hente skriftstørrelsen på avsnittet. Når du klikker på knappen, vises en varslingsmelding som viser skriftstørrelsen på avsnittet.

Produksjon

Før du klikker på knappen.

Etter å ha klikket på knappen.

Fontstørrelsen på avsnittet er trukket ut.

addClass () -metode

Som navnet antyder, brukes JQuery AddClass () -metoden for å legge til enten enkelt- eller flere klassenavn til et HTML -element.

Syntaks

$ (velger).AddClass (ClassName, FunCname (Index, CurrentClass))

Merk: klassenavn er en nødvendig parameter som indikerer klassenavnet som skal legges til og funcname er en valgfri parameter som spesifiserer en funksjon for å hente et klassenavn som skal legges til.

Eksempel

Anta at du har definert et lignende element mer enn en gang på en webside, og at du vil legge en klasse til bare ett av disse elementene. Bruk følgende kode.

Html

Første avsnitt.

Siste avsnitt.

Legg til et klassenavn i siste avsnitt

I koden ovenfor har vi opprettet to

Tagger, og ett element.

CSS

.Merk
Fontstørrelse: 160%;
Farge: blå;

Her har vi definert litt styling for en klasse "Merk".

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("P: Last").addClass ("Merk");
);
);

I koden ovenfor legges en klasse lagt til med navnet "Merk" til den siste

element. Derfor, på et klikk på knappen, vil stilen som er definert for notatklassen bli brukt på siste avsnitt.

Produksjon

Klassen "Notat" er vellykket lagt til i siste avsnitt.

hasclass () -metode

For å evaluere om et element har en klasse eller ikke, brukes hasclass () -metoden. Denne metoden viser sann hvis den oppdager noen klasse eller på annen måte usann.

Syntaks

$ (velger).hasclass (klassenavn)

Merk: klassenavn er en nødvendig parameter som brukes til å spesifisere et klassenavn som skal søkes etter.

Eksempel

Anta at du vil sjekke om det er brukt noen klasse på et visst sett med lignende elementer. Slik gjør du.

Html

En paragraf.

Nok et avsnitt.

Har noe P -element "Main" -klasse?

I denne HTML -koden opprettet vi to

elementer, og ett element. Foruten dette, den første

elementet har blitt tildelt klassen “Main”.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
Varsel ($ ("P").hasclass ("main"));
);
);

I koden ovenfor er det designet en varslingsmelding som vil returnere sant når hasclass () -metoden oppdager en klasse med navnet "main".

Produksjon

Hasclass () -metoden fungerer som den skal.

RemovelClass () Metode

For å fjerne en enkelt eller flere klassenavn fra HTML -elementer, brukes FjernClass () -metoden.

Syntaks

$ (velger).Fjerningsklasse (ClassName, FunCname (Index, CurrentClass))

Merk: klassenavn Parameter spesifiserer klassenavnet som skal fjernes, og funcname Parameter spesifiserer en funksjon som henter enkelt- eller flere klassenavn som skal fjernes. Begge er valgfrie parametere.

Eksempel

Anta at du vil fjerne en klasse fra et visst HTML -element. Bruk koden nedenfor.

Html

Overskrift 1

Overskrift 2

Overskrift 3

Fjern klassen "hode" fra H1 -elementet.

Vi har laget fire HTML -elementer som er

,

,

, og . Dessuten har vi brukt en klasse "hode" på

element.

CSS

.hode
Opacitet: 0.4;

Klassehodet har fått en viss stil gjennom CSS.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("H1").removeClass ("head");
);
);

I koden ovenfor er det blitt brukt fjerneplasse () for å fjerne "hodet" -klassen fra

element.

Produksjon

"Head" -klassen er fjernet fra

element.

ToggleClass () -metode

Denne metoden bytter mellom å legge til eller fjerne enkelt- eller flere klassenavn fra HTML -elementer. Det fungerer på en måte som det tilfører klassenavn til de elementene der det mangler og fjerner klassenavn (er) fra de elementene der det allerede er satt.

Syntaks

$ (velger).TOGGLECLASS (ClassName, FunCname (Index, CurrentClass), Toggle)

I syntaks ovenfor:

• De klassenavn er en nødvendig parameter som brukes til å spesifisere et klassenavn som skal legges til eller fjernes fra et element.
• De funcname Parameter Angi en funksjon som henter et klassenavn som skal legges til eller fjernes.
• På den annen side, veksle Parameter er en boolsk Verdi som forteller om A -klassenavnet skal legges til (sant), eller fjernes (falsk).

Både funcname, og veksle er valgfrie parametere.

Eksempel

Anta at du vil veksle et klassenavn mellom flere HTML -elementer. Følg koden nedenfor.

Html

Overskrift 1

Overskrift 2

Overskrift 3

Veksle

Fire HTML -elementer opprettes som er

,

,

, og .

CSS

.hode
Farge: blå;
Opacitet: 0.3;

Ved å bruke CSS har en klasse etter navnet "Head" fått en viss stil.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("H1, H2, H3").ToggleClass ("hode");
);
);

I koden ovenfor er klassen "hode" slått sammen blant

,

, og

elementer.

Produksjon

Du må klikke på knappen flere ganger for å se den vekslende effekten.

Vekslingsklassen fungerer som den skal.

Konklusjon

CSS kan manipuleres gjennom bruk av forskjellige jQuery -metoder som er; CSS () -metoden bruker eller henter en eller flere stilegenskaper til et element, AddClass () -metoden legger til klassenavn til elementer, hasclass () oppdager at et element har en klasse eller ikke, fjerner renglass () fjerner klassenavn fra Elementer, og ToggleClass () bytter mellom å legge til eller fjerne klassenavn fra elementer. Disse metodene blir forklart i detalj ved hjelp av relevante eksempler.