JQuery ist eine leichte und lustige JavaScript -Bibliothek, in der Sie CSS auf vielfältige Weise durch die Verwendung verschiedener JQuery -Methoden manipulieren können. Mit diesen Methoden können Sie die Stileigenschaften von Elementen festlegen oder entweder einen bestimmten Klassennamen aus einem Element hinzufügen oder entfernen oder zwischen dem Hinzufügen oder Entfernen von Klassen umschalten.

Die unten erwähnten JQuery-Methoden werden verwendet, um CSS zu manipulieren .

1. CSS () Methode
2. AddClass () Methode
3. HASCASS () -Methode
4. removeclass () Methode
5. ToggleClass () -Methode

Lassen Sie uns sie ausführlich erkunden.

CSS () Methode

Die CSS () -Methode in JQuery wird verwendet, um eine oder mehrere Stileigenschaften auf ein HTML -Element anzuwenden oder zu holen.

Syntax

CSS ("Eigenschaft", "Wert"); // So setzen Sie eine CSS -Eigenschaft
CSS ("Eigentum"); // um eine CSS -Eigenschaft zu erhalten

Beispiel 1

Angenommen, Sie möchten die Hintergrundfarbe eines Elements mit der CSS () -Methode in jQuery festlegen.

Html

Dies ist ein Absatz

Setzen Sie die Hintergrundfarbe von Div

Im obigen Code sind drei HTML -Elemente, die sind ,

, und werden geschaffen.

JQuery

$ (Dokument).Ready (function ()
$ (".Taste").klicken (function ()
$ ("div").CSS ("Hintergrundfarbe", "Rosybrown");
);
);

Mit der CSS () -Methode ändern wir die Hintergrundfarbe des Elements nur bei der Schaltfläche Klicken Sie auf die Schaltfläche.

Ausgang

Die Hintergrundfarbe des DIV wurde eingestellt.

Beispiel 2

Angenommen, Sie möchten nur eine Stileigenschaft eines HTML -Elements extrahieren. Verwenden Sie den folgenden Code.

Html

Ein Absatz.

Return Schriftgröße von p

Im obigen Code,

, und Elemente wurden außerdem erstellt, die

Element wurde eine Schriftgröße von 25px erhalten.

JQuery

$ (Dokument).Ready (function ()
$ ("Button").klicken (function ()
alert ("font size =" + $ ("p").CSS ("Schriftgröße"));
);
);

Wir verwenden die CSS () -Methode, um nur die Schriftgröße des Absatzes zu holen. Sobald Sie auf die Schaltfläche klicken, wird eine Warnmeldung angezeigt, in der die Schriftgröße des Absatzes angezeigt wird.

Ausgang

Bevor Sie auf die Schaltfläche klicken.

Nach dem Klicken auf die Schaltfläche.

Die Schriftgröße des Absatzes wurde extrahiert.

AddClass () Methode

Wie der Name schon sagt, wird die Methode jQuery addClass () verwendet, um einem HTML -Element entweder einzelne oder mehrere Klassennamen hinzuzufügen.

Syntax

$ (Selektor).AddClass (ClassName, Funcname (Index, CurrentClass))

Notiz: Der Klassenname ist ein erforderlich Funktionsname ist ein optionaler Parameter, der eine Funktion angibt.

Beispiel

Angenommen, Sie haben ein ähnliches Element mehr als einmal auf einer Webseite definiert und möchten nur einem dieser Elemente eine Klasse hinzufügen. Verwenden Sie den folgenden Code.

Html

Erster Paragraph.

Letzter Absatz.

Fügen Sie dem letzten Absatz einen Klassennamen hinzu

Im obigen Code haben wir zwei erstellt

Tags und ein Element.

CSS

.Notiz
Schriftgröße: 160%;
Farbe blau;

Hier haben wir ein Styling für eine Klasse „Notiz“ definiert.

JQuery

$ (Dokument).Ready (function ()
$ ("Button").klicken (function ()
$ ("P: Last").AddClass ("Notiz");
);
);

Im obigen Code wird eine Klasse mit dem Namen "Hinweis" zum letzten hinzugefügt

Element. Daher wird der für die Notizklasse definierte Stil auf der Schaltfläche auf den letzten Absatz angewendet.

Ausgang

Die Klasse „Notiz“ wurde erfolgreich in den letzten Absatz hinzugefügt.

HASCASS () -Methode

Um zu bewerten, ob ein Element eine Klasse hat oder nicht, wird die HASCASS () -Methode verwendet. Diese Methode zeigt True an, wenn sie eine Klasse oder auf andere Weise falsch erkennt.

Syntax

$ (Selektor).Hasclass (Klassenname)

Notiz: Der Klassenname ist ein erforderlicher Parameter, der verwendet wird, um einen Klassennamen anzugeben.

Beispiel

Nehmen wir an, Sie möchten überprüfen, ob eine Klasse für eine bestimmte Reihe ähnlicher Elemente angewendet wird. Das ist wie man es macht.

Html

Ein Absatz.

Ein weiterer Absatz.

Hat ein P -Element "Haupt" -Klasse??

In diesem HTML -Code haben wir zwei erstellt

Elemente und ein Element. Außerdem der erste

Element wurde der Klasse "Haupt" zugewiesen.

JQuery

$ (Dokument).Ready (function ()
$ ("Button").klicken (function ()
ALERT ($ ("P").Hasclass ("Main"));
);
);

Im obigen Code wurde eine Warnmeldung entworfen, die true zurückgibt, wenn die HASCASS () -Methode eine Klasse mit dem Namen „Main“ erkennt.

Ausgang

Die HASCASS () -Methode funktioniert ordnungsgemäß.

removeclass () Methode

Zum Zwecke der Entfernung eines einzelnen oder mehrere Klassennamen aus HTML -Elementen wird die Methode removeclass () verwendet.

Syntax

$ (Selektor).removeclass (className, funcname (index, currentClass))

Notiz: Der Klassenname Parameter gibt den zu entfernenden Klassennamen an und die Funktionsname Der Parameter gibt eine Funktion an, die einzelne oder mehrere Klassennamen holt, die entfernt werden sollen. Beide sind optionale Parameter.

Beispiel

Angenommen, Sie möchten eine Klasse aus einem bestimmten HTML -Element entfernen. Verwenden Sie den folgenden Code.

Html

Überschrift 1

Überschrift 2

Überschrift 3

Entfernen Sie die Klasse "Kopf" aus dem H1 -Element.

Wir haben vier HTML -Elemente erstellt, die sind

,

,

, Und . Darüber hinaus haben wir eine Klasse „Kopf“ auf die angewendet

Element.

CSS

.Kopf
Deckkraft: 0.4;

Der Klassenkopf wurde durch CSS einen Stil erhalten.

JQuery

$ (Dokument).Ready (function ()
$ ("Button").klicken (function ()
$ ("H1").removeclass ("Kopf");
);
);

Im obigen Code wurde removeclass () angewendet, um die "Kopf" -Klasse aus zu entfernen

Element.

Ausgang

Die "Kopf" -Kasse wurde aus dem entfernt

Element.

ToggleClass () -Methode

Diese Methode wechselt zwischen dem Hinzufügen oder Entfernen von einzelnen oder mehreren Klassennamen aus HTML -Elementen. Es funktioniert so, dass es den Elementen Klassennamen hinzufügt, in denen es fehlt, und die Klassennamen (en) aus diesen Elementen, in denen es bereits festgelegt wurde.

Syntax

$ (Selektor).ToggleClass (ClassName, Funcname (Index, CurrentClass), Toggle)

In der obigen Syntax:

• Der Klassenname ist ein erforderlicher Parameter, mit dem ein Klassenname angegeben oder aus einem Element entfernt werden soll.
• Der Funktionsname Parameter Geben Sie eine Funktion an, die einen zugefügten oder entfernten Klassennamen abreißt.
• Andererseits die Umschalten Parameter ist a boolean Wert, der zeigt, ob ein Klassenname hinzugefügt werden sollte (wahr) oder entfernt (falsch).

Beide Funcname und umschalten sind optionale Parameter.

Beispiel

Angenommen, Sie möchten einen Klassennamen zwischen mehreren HTML -Elementen umschalten. Folgen Sie dem folgenden Code.

Html

Überschrift 1

Überschrift 2

Überschrift 3

Umschalten

Es werden vier HTML -Elemente erstellt, die sind

,

,

, Und .

CSS

.Kopf
Farbe blau;
Deckkraft: 0.3;

Mit CSS wurde eine Klasse mit dem Namen „Kopf“ einen Stil erhalten.

JQuery

$ (Dokument).Ready (function ()
$ ("Button").klicken (function ()
$ ("H1, H2, H3").ToggleClass ("Kopf");
);
);

Im obigen Code wird die Klasse „Kopf“ unter den

,

, Und

Elemente.

Ausgang

Sie müssen mehrmals auf die Schaltfläche klicken, um den Umschalt -Effekt anzuzeigen.

Die Umschaltklasse funktioniert ordnungsgemäß.

Abschluss

CSS kann durch die Verwendung verschiedener jQuery -Methoden manipuliert werden. Die CSS () -Methode wendet oder holt eine oder mehrere Stileigenschaften eines Elements an, die addClass () -Methode fügt Klassennamen zu Elementen hinzu, die hasclass () erkennt, ob ein Element eine Klasse hat oder nicht. Elemente und ToggleClass () wechseln zwischen Hinzufügen oder Entfernen von Klassennamen aus Elementen. Diese Methoden werden mit Hilfe relevanter Beispiele ausführlich erläutert.