Comment obtenir le nom de classe actuel dans jquery

jQuery est une bibliothèque JavaScript populaire qui fournit des méthodes très pratiques pour travailler avec des éléments HTML et des interactions de page. Dans de nombreux cas, nous avons besoin d'obtenir le nom de classe de l'élément actuel pour effectuer diverses opérations, telles que l'ajout, la suppression ou le changement de nom de classe. Cet article explique comment utiliser jQuery pour obtenir le nom de classe actuel et fournit quelques exemples.

1. Méthode de base pour obtenir le nom de classe actuel

Pour obtenir le nom de classe de l'élément actuel, vous pouvez utiliser la méthode .attr() de jQuery et passer "class" en paramètre :

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

où "élément" est Une chaîne de sélecteur jQuery, qui peut être n'importe quel sélecteur CSS valide, tel que le nom de classe, l'ID, le nom de balise, etc. Ce code renverra une chaîne contenant tous les noms de classe de l'élément actuel, séparés par des espaces.

Par exemple, nous avons le code HTML suivant :

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

Nous pouvons utiliser le code suivant pour obtenir le nom de classe de l'élément actuel :

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

Deuxièmement, utilisez l'attribut classList pour obtenir le nom de classe actuel

De plus En utilisant la méthode .attr() de jQuery, vous pouvez également utiliser l'attribut classList de JavaScript natif pour obtenir le nom de la classe actuelle, par exemple :

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

où "[0]" convertit l'objet jQuery en un nœud DOM. Ce code renverra un objet DOMTokenList contenant tous les noms de classe, ce qui facilitera l'ajout, la suppression et le changement de nom de classe.

Par exemple, nous avons le code HTML suivant :

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

Nous pouvons utiliser le code suivant pour obtenir le nom de classe de l'élément actuel :

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

3. Nom de classe d'opération de base

1. Ajoutez un nom de classe

Pour ajouter un nom de classe via jQuery, vous pouvez utiliser la méthode .addClass(). Par exemple :

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

où "new-class" est le nom de la classe à ajouter. Ce code ajoutera un nom de classe appelé « new-class » à l'élément actuel.

Par exemple, nous avons le code HTML suivant :

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

Nous pouvons utiliser le code suivant pour ajouter un nouveau nom de classe :

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

Cela ajoutera un nom de classe appelé "big" à l'élément actuel, HTML mis à jour Le code est la suivante :

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

2. Supprimer le nom de classe

Pour supprimer un nom de classe via jQuery, vous pouvez utiliser la méthode .removeClass(). Par exemple :

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

où "old-class" est le nom de la classe à supprimer. Ce code supprimera une classe nommée "old-class" de l'élément actuel.

Par exemple, nous avons le code HTML suivant :

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

Nous pouvons utiliser le code suivant pour supprimer un nom de classe :

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

Cela supprimera un nom de classe nommé "small" de l'élément actuel, le code HTML mis à jour est comme suit :

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

3. Changer de nom de classe

Pour changer de nom de classe via jQuery, vous pouvez utiliser la méthode .toggleClass(). Par exemple :

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

Parmi eux, "class1 class2" est le nom de classe à changer, et plusieurs noms de classe sont séparés par des espaces. Ce code basculera entre deux noms de classe dans l'élément courant, les supprimant s'ils existent déjà dans l'élément courant, sinon les ajoutant.

Par exemple, nous avons le code HTML suivant :

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

Nous pouvons utiliser le code suivant pour inverser les deux noms de classe :

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

Cela supprimera un nom de classe nommé "small" de l'élément actuel et ajoutera un nom de classe nommé Le nom de la classe "big", le code HTML mis à jour est le suivant :

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

IV Exemples d'application

Voici quelques exemples montrant comment utiliser jQuery pour obtenir le nom de la classe actuelle :

1. nom lorsqu'on clique sur un élément :

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

2. Changez le style de la barre de navigation lors du défilement de la fenêtre :

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

3 Mettez à jour le titre de l'image lorsque vous changez d'image dans le carrousel :

$(".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);
});

Résumé

Grâce à cet article, nous avons appris à utiliser jQuery pour obtenir les noms de classe actuels et utilisons quelques exemples pour montrer comment manipuler les noms de classe. Le nom de classe actuel peut être obtenu directement via la méthode .attr(), et l'attribut .classList peut être utilisé pour ajouter, supprimer et changer facilement de nom de classe. Avoir ces connaissances facilite le travail avec les éléments et les styles HTML lors de l'écriture de code JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!