So erhalten Sie den aktuellen Klassennamen in jquery

jQuery ist eine beliebte JavaScript-Bibliothek, die einige sehr praktische Methoden für die Arbeit mit HTML-Elementen und Seiteninteraktionen bietet. In vielen Fällen müssen wir den Klassennamen des aktuellen Elements abrufen, um verschiedene Vorgänge auszuführen, z. B. das Hinzufügen, Löschen oder Ändern von Klassennamen. In diesem Artikel wird erläutert, wie Sie mit jQuery den aktuellen Klassennamen abrufen, und es werden einige Beispiele bereitgestellt.

1. Grundlegende Methode zum Abrufen des aktuellen Klassennamens

Um den Klassennamen des aktuellen Elements zu erhalten, können Sie die .attr()-Methode von jQuery verwenden und „class“ übergeben als Parameter Eingabe:

var className = $("element").attr("class");

Wobei „Element“ eine jQuery-Selektorzeichenfolge ist, die ein beliebiger gültiger CSS-Selektor sein kann, z. B. Klassenname, ID, Tag-Name usw. Dieser Code gibt eine Zeichenfolge zurück, die alle Klassennamen des aktuellen Elements enthält, getrennt durch Leerzeichen.

Zum Beispiel haben wir den folgenden HTML-Code:

<div class="box small"></div>

Wir können den folgenden Code verwenden, um den Klassennamen des aktuellen Elements abzurufen:

var className = $("div.box.small").attr("class");
console.log(className); // 输出 "box small"

#🎜 🎜# 2. Verwenden Sie das classList-Attribut, um den aktuellen Klassennamen abzurufen Beispiel:

var className = $("element")[0].classList;

where , „[0]“ konvertiert jQuery-Objekte in DOM-Knoten. Dieser Code gibt ein DOMTokenList-Objekt zurück, das alle Klassennamen enthält, sodass Klassennamen einfach hinzugefügt, gelöscht und geändert werden können.

Zum Beispiel haben wir den folgenden HTML-Code:

<div class="box small"></div>

Wir können den folgenden Code verwenden, um den Klassennamen des aktuellen Elements abzurufen:

var classList = $("div.box.small")[0].classList;
console.log(classList); // 输出 ["box", "small"]

#🎜 🎜# 3. Grundoperation Klassenname

1. Klassennamen hinzufügen

Um einen Klassennamen über jQuery hinzuzufügen, können Sie die Methode .addClass() verwenden. Beispiel:

$("element").addClass("new-class");

wobei „new-class“ der Name der Klasse ist, die hinzugefügt werden soll. Dieser Code fügt dem aktuellen Element einen Klassennamen namens „new-class“ hinzu.

Zum Beispiel haben wir den folgenden HTML-Code:

<div class="box small"></div>

Wir können den folgenden Code verwenden, um einen neuen Klassennamen hinzuzufügen:

$("div.box.small").addClass("big");

This wird dem aktuellen Element einen Klassennamen mit dem Namen „big“ hinzufügen:

<div class="box small big"></div>

2 Löschen Sie den Klassennamen

Klassennamen über jQuery, Sie können die Methode .removeClass() verwenden. Beispiel:

$("element").removeClass("old-class");

wobei „old-class“ der Name der zu löschenden Klasse ist. Dieser Code entfernt eine Klasse mit dem Namen „old-class“ aus dem aktuellen Element.

Zum Beispiel haben wir den folgenden HTML-Code:

<div class="box small"></div>

Wir können den folgenden Code verwenden, um einen Klassennamen zu entfernen:

$("div.box.small").removeClass("small");

Das wird Entfernen Sie einen Klassennamen aus dem aktuellen Element. Löschen Sie einen Klassennamen mit dem Namen „small“ aus. Der aktualisierte HTML-Code lautet wie folgt:

<div class="box"></div>

3 Klassennamen wechseln

🎜🎜# Klassennamen über jQuery können Sie die Methode .toggleClass() verwenden. Beispiel:

$("element").toggleClass("class1 class2");

Unter diesen ist „class1 class2“ der zu wechselnde Klassenname, und mehrere Klassennamen werden durch Leerzeichen getrennt. Dieser Code wechselt zwischen zwei Klassennamen im aktuellen Element und entfernt sie, wenn sie bereits im aktuellen Element vorhanden sind, andernfalls fügt er sie hinzu.

Zum Beispiel haben wir den folgenden HTML-Code:

<div class="box small"></div>

Wir können den folgenden Code verwenden, um die beiden Klassennamen zu vertauschen:

$("div.box.small").toggleClass("small big");

This ändert den aktuellen Klassennamen mit dem Namen „small“ aus dem Element und fügt einen Klassennamen mit dem Namen „big“ hinzu. Der aktualisierte HTML-Code lautet wie folgt:

<div class="box big"></div>

4. Anwendungsbeispiel

# 🎜🎜#Hier sind einige Beispiele, die zeigen, wie man den aktuellen Klassennamen mit jQuery erhält:

1 Gibt den aktuellen Klassennamen aus, wenn auf ein Element geklickt wird:

$("div").click(function() {
  var className = $(this).attr("class");
  console.log(className);
});

2 . Beim Scrollen Der Stil der Navigationsleiste beim Wechseln der Fenster:

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop >= 100) {
    $("nav").addClass("fixed-top");
  } else {
    $("nav").removeClass("fixed-top");
  }
});

3. Aktualisieren Sie den Bildtitel, wenn Sie Bilder im Karussell wechseln:

$(".carousel-item").on("slide.bs.carousel", function() {
  var captionText = $(this).find(".carousel-caption h4").text();
  var className = $(this).attr("class");
  console.log("当前类名：" + className);
  $(".slider-title").text(captionText);
});

Zusammenfassung

# 🎜🎜#Von In diesem Artikel haben wir gelernt, wie man mit jQuery den aktuellen Klassennamen erhält, und anhand einiger Beispiele gezeigt, wie man Klassennamen manipuliert. Der aktuelle Klassenname kann direkt über die Methode .attr() abgerufen werden, und das Attribut .classList kann zum einfachen Hinzufügen, Löschen und Wechseln von Klassennamen verwendet werden. Dieses Wissen erleichtert die Arbeit mit HTML-Elementen und -Stilen beim Schreiben von JavaScript-Code.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie den aktuellen Klassennamen in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!