Anwendungsbeispiel für das Festlegen des Elementstils mit jQuery_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung von jQuery zum Festlegen von Elementstilen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

CSS ist ein Teil der Seite, der nicht getrennt werden kann. jQuery bietet auch einige praktische Methoden im Zusammenhang mit CSS. Im vorherigen Artikel wurde addClass() verwendet, um CSS-Stile zu Elementen hinzuzufügen. Hier stellen wir hauptsächlich vor, wie jQuery den Stil der Seite festlegt. Einschließlich Hinzufügen, Löschen, dynamisches Umschalten usw.

1. CSS-Kategorien hinzufügen und löschen.

Code kopieren Der Code lautet wie folgt:

$(function() {
//Mehrere CSS-Kategorien gleichzeitig hinzufügen
$("img").addClass("css1 css2");
});

Der obige Code fügt beispielsweise zwei Stile, css1 und css2, zum img-Element hinzu

removeClass entspricht der addClass-Methode und die Beispiele werden hier nicht wiederholt.

2. Wechseln Sie dynamisch zwischen Kategorien.

Häufig möchten Sie, dass der Stil einiger Elemente abhängig vom Betriebsstatus des Benutzers zwischen einer bestimmten Kategorie wechselt, manchmal der Kategorie addClass() und manchmal der Kategorie removeClass(). Jq stellt dazu eine direkte toggleClass(name) bereit Ähnliche Operationen.

Code kopieren Der Code lautet wie folgt:

$(function() {
$("p").click(function() {
$(this).toggleClass("css1");
})
});

Der obige Code implementiert den kontinuierlichen Wechsel des CSS1-Stils beim Klicken auf das P-Element. Die Methode toggleClass(name) kann nur eine CSS-Kategorie festlegen. Mehrere CSS können nicht umgeschaltet werden.

3. Stile direkt abrufen und festlegen.

Genau ähnlich wie die Methode attr() stellt jQuery die Methode css() bereit, um den Stil eines Elements direkt abzurufen und festzulegen, z. B. mit css(name), um den Stilwert eines bestimmten Stils abzurufen. Legen Sie mehrere Stile gleichzeitig über die CSS-Liste (Eigenschaften) fest und legen Sie einen bestimmten Stil des Elements über CSS (Name, Wert) fest.

Zum Beispiel: Ändern Sie die Farbmarkierung, indem Sie die Mouseover- und Mouseout-Ereignisse so einstellen, dass sie CSS(Name,Wert) auslösen.

Code kopieren Der Code lautet wie folgt:

$(function() {
$("p").mouseover(function() {
$(this).css("color", "red");
});
$("p").mouseout(function() {
$(this).css("color", "black");
});
});

Die CSS-Methode stellt das Opazitätsattribut bereit. Und kompatibel mit verschiedenen Browsern.

Ändern Sie das obige Beispiel und legen Sie den Transparenzwert des p-Elements über Mausereignisse fest.

Code kopieren Der Code lautet wie folgt:

$(function() {
$("p").mouseover(function() {
$(this).css("opacity", "0.5");
});
$("p").mouseout(function() {
$(this).css("opacity", "1");
});
});

Darüber hinaus wird in CSS die Methode hasClass(name) bereitgestellt, um zu bestimmen, ob für ein Element eine bestimmte CSS-Kategorie festgelegt ist. Gibt einen booleschen Wert zurück. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$("li:last").hasClass("css1")

Drückt aus, ob das CSS-Attribut des letzten LI die Klasse CSS1 enthält. und

Code kopieren Der Code lautet wie folgt:

$("li:last").is(".css1" )

Der Code hat genau den gleichen Effekt.

Wenn man sich den jQuery-Quellcode ansieht, ist die hasClass-Methode die is()-Methode.

Code kopieren Der Code lautet wie folgt:

hasClass: function(selector) {
return this.is("." selector);
}

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