Maison > interface Web > Questions et réponses frontales > Comment obtenir des informations en classe avec jquery

Comment obtenir des informations en classe avec jquery

PHPz
Libérer: 2023-04-17 15:14:06
original
734 Les gens l'ont consulté

jQuery est une bibliothèque JavaScript largement utilisée qui peut facilement manipuler des documents HTML, gérer des événements, créer des animations, etc. En développement web, il est souvent nécessaire d'obtenir des éléments et de les exploiter via jQuery. Cet article explique comment utiliser jQuery pour obtenir les informations dans la classe.

1. Qu'est-ce que la classe

En HTML, la classe fait référence au marquage d'un ensemble d'éléments en tant que groupe ou classe indépendant. Cela rend plus facile et plus pratique la manipulation de cet ensemble d’éléments via CSS ou JavaScript. Un élément HTML peut contenir plusieurs classes, et ces classes peuvent être séparées par des espaces.

2. Utilisez jQuery pour obtenir la classe

Pour obtenir la classe dans jQuery, vous devez utiliser "." (point) pour sélectionner la classe. Par exemple, pour sélectionner tous les éléments avec la classe « info », vous pouvez utiliser le code suivant :

$(".info")
Copier après la connexion

Cela sélectionnera tous les éléments avec la classe « info » et renverra un objet jQuery. Un objet jQuery est en fait un tableau d'éléments correspondants, qui peuvent être manipulés à l'aide de diverses méthodes jQuery.

3. Manipuler la classe

Une fois la classe obtenue, vous pouvez utiliser différentes méthodes jQuery pour faire fonctionner ces éléments. Voici quelques méthodes jQuery courantes :

  1. addClass() - Ajouter une classe

Cette méthode ajoutera la classe spécifiée à l'élément sélectionné. Exemple de code :

$(".info").addClass("active");
Copier après la connexion

Le code ci-dessus ajoutera une classe nommée "active" à tous les éléments avec la classe "info".

  1. removeClass() - Supprimer la classe

Cette méthode supprimera la classe spécifiée de l'élément sélectionné. Exemple de code :

$(".info").removeClass("active");
Copier après la connexion

Le code ci-dessus supprimera la classe nommée "active" de tous les éléments avec la classe "info".

  1. toggleClass() - Toggle Class

Cette méthode basculera la classe spécifiée dans l'élément sélectionné (la supprime si elle est présente ; l'ajoute sinon). Exemple de code :

$(".info").toggleClass("active");
Copier après la connexion

Le code ci-dessus changera la classe nommée "active" dans tous les éléments avec la classe "info".

4. Obtenez les informations en classe

En HTML, la classe peut contenir n'importe quel caractère. Afin d'obtenir les informations au sein de la classe, vous pouvez utiliser des expressions régulières pour faire correspondre la chaîne. Voici un exemple de code :

var reg = /info-(.*)/;
$(".info").each(function(){
  var className = $(this).attr("class");
  var matchResult = className.match(reg);
  var infoValue = matchResult[1];
  console.log(infoValue);
});
Copier après la connexion

Le code ci-dessus trouvera la classe commençant par "info-" dans tous les éléments avec la classe "info" et obtiendra les informations dans la classe.

5. Résumé

Cet article explique comment utiliser jQuery pour obtenir des classes et exploiter des classes via des méthodes telles que addclass(), removeClass() et toggleClass(). En même temps, cet article présente également comment utiliser les expressions régulières pour obtenir des informations au sein d'une classe. J'espère que cet article pourra vous aider à comprendre plus profondément jQuery.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal