JQuerys Methode zum Implementieren von Stileinstellungen, Anhängen, Entfernen und Wechseln von_jquery

Die Beispiele in diesem Artikel beschreiben, wie JQuery das Festlegen, Anhängen, Entfernen und Wechseln von Stilen implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Mit JQuery wird die Stiloperation von Elementen sehr einfach. Werfen wir einen Blick darauf, wie Sie mit JQuery Elementstile abrufen, festlegen, anhängen, löschen und andere Vorgänge für Elementstile ausführen.

Stile abrufen und festlegen

Sowohl das Abrufen als auch das Festlegen einer Klasse kann mit der Methode attr() erfolgen. Verwenden Sie beispielsweise die Methode attr(), um die Klasse des p-Elements abzurufen. Der JQuery-Code lautet wie folgt:

var p_class = $("p").attr("class");
//获取p元素的class

Verwenden Sie die Methode attr(), um die Klasse des p-Elements festzulegen. Der JQuery-Code lautet wie folgt:

$("p").attr("'class", "high");
//设置p元素的class为 "high"

In den meisten Fällen wird die ursprüngliche Klasse durch eine neue Klasse ersetzt, anstatt eine neue Klasse an die ursprüngliche anzuhängen.

Stil hinzufügen

Was ist Zusatzunterricht? Wenn die ursprüngliche Klasse des p-Elements myClass ist, wird das Klassenattribut nach dem Hinzufügen einer Klasse mit dem Namen high zu „myClass high“, was die Überlagerung der beiden Stile myClass und high darstellt. JQuery bietet eine spezielle addClass()-Methode zum Hinzufügen von Stilen. Um das Beispiel leichter verständlich zu machen, fügen Sie zunächst einen weiteren Stilsatz im Style-Tag hinzu:

.high{ color:red; }
.another{ font-style:italic; color:blue; }

Dann fügen Sie der Webseite eine Schaltfläche „Klasse anhängen“ hinzu. Der Ereigniscode der Schaltfläche lautet wie folgt:

$("#btn_3").click(function(){
  $("#nm_p").addClass("another");
  // 追加样式
});

Wenn Sie schließlich auf die Schaltfläche „Klasse anhängen“ klicken, ändert sich der Stil des p-Elements in Kursivschrift und die vorherige rote Schriftart ändert sich ebenfalls in Blau. Zu diesem Zeitpunkt hat das p-Element gleichzeitig zwei Klassenwerte, nämlich „hoch“ und „andere“. Es gibt die folgenden zwei Bestimmungen in CSS.

1. Wenn einem Element mehrere Klassenwerte hinzugefügt werden, entspricht dies dem Zusammenführen ihrer Stile.
2. Wenn verschiedene Klassen dasselbe Stilattribut festlegen, überschreibt letzteres das erstere.

Im obigen Beispiel entspricht dies dem Hinzufügen des folgenden Stils zum p-Element:

color : red;  /* 字体颜色设置红色*/ 
font-style:italic; 
color:blue;

Im obigen Stil gibt es zwei „Farb“-Attribute, und das letztere „Farb“-Attribut überschreibt das vorherige „Farb“-Attribut, sodass der endgültige „Farb“-Attributwert „blau“ statt „rot“ ist.

Stil entfernen

Wenn der Benutzer einen bestimmten Wert der Klasse löschen möchte, wenn er auf eine Schaltfläche klickt, kann er die Methode „removeClass()“ verwenden, die das Gegenteil der Methode „addClass()“ ist. Ihre Funktion besteht darin, alle oder bestimmte Elemente zu löschen aus der passenden Elementklasse. Sie können beispielsweise den folgenden JQuery-Code verwenden, um die Klasse mit dem Wert „high“ im p-Element zu löschen:

$("p").removeClass("high");
//移除p元素中值为"high"的class

Wenn Sie beide Klassen des p-Elements löschen möchten, müssen Sie die Methode „removeClass()“ zweimal verwenden. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

$("p").removeClass("high").removeClass („ein anderer“);

JQuery bietet eine einfachere Möglichkeit. Mehrere Klassennamen können mit Leerzeichen gelöscht werden. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

$("p").removeClass("high another");

Darüber hinaus können Sie auch eine Funktion der Methode „removeClass()“ verwenden, um den gleichen Effekt zu erzielen. Wenn keine Parameter erforderlich sind, werden alle Klassenwerte gelöscht. Der JQuery-Code lautet wie folgt:

$("p").removeClass();
//移除p元素的所有class

Stil wechseln

In JQuery gibt es eine Methode toggle(). Der JQuery-Code lautet wie folgt:

toggleBtn.toggle(function(){
  //元素显示 代码③
}, function(){
  //元素隐藏 代码④
})

Die Funktion der

toggle()-Methode besteht hier darin, die beiden Funktionen von Code ③ und Code ④ abwechselnd auszuführen. Wenn das Element ursprünglich angezeigt wird, dann verstecken Sie es: Wenn das Element ursprünglich verborgen ist, dann zeigen Sie es an. Derzeit steuert die Methode toggle() hauptsächlich das wiederholte Wechseln des Verhaltens.

Darüber hinaus bietet JQuery auch eine toggleClass()-Methode, um das wiederholte Wechseln von Stilen zu steuern. Entfernt den Klassennamen, wenn er vorhanden ist, und fügt ihn hinzu, wenn der Klassenname nicht vorhanden ist. Führen Sie beispielsweise die Methode toggleClass() für das p-Element aus.

$("p").toggleClass("another");
//重复切换类名“another”

Wenn Sie kontinuierlich auf die Schaltfläche „Stil wechseln“ klicken, wechselt der Wert der Klasse des p-Elements wiederholt zwischen „myClass“ und „myClass another“.

Bestimmen Sie, ob ein bestimmter Stil enthalten ist

hasClass() kann verwendet werden, um festzustellen, ob ein Element eine bestimmte Klasse enthält. Wenn ja, gibt es true zurück, andernfalls gibt es false zurück. Sie können beispielsweise den folgenden Code verwenden, um festzustellen, ob das p-Element die Klasse „another“ enthält:

Code kopieren Der Code lautet wie folgt:

$("p").hasClass("another");

Diese Methode wurde entwickelt, um die Lesbarkeit des Codes zu verbessern. In JQuery wird tatsächlich die Methode is() aufgerufen, um diese Funktion abzuschließen. Diese Methode entspricht dem folgenden Code:

Code kopieren Der Code lautet wie folgt:

$("p").is(".another"); //ist ("." Klasse);

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.