Maison > interface Web > Questions et réponses frontales > Comment obtenir la valeur d'attribut de la balise dans jquery

Comment obtenir la valeur d'attribut de la balise dans jquery

PHPz
Libérer: 2023-04-06 10:09:39
original
5347 Les gens l'ont consulté

Ces dernières années, le front-end Web est devenu une industrie très en vogue et jQuery, en tant qu'excellente bibliothèque JavaScript, est largement utilisée dans tous les aspects du développement front-end Web. Lorsque vous utilisez jQuery, obtenir les valeurs des attributs de balise est la base des bases. Examinons ensuite plusieurs façons dont jQuery peut obtenir la valeur d'un attribut de balise.

1. Méthode attr()

La méthode attr() est une méthode courante dans jQuery. Elle est utilisée pour obtenir ou définir la valeur d'attribut d'un élément spécifié. Voici la syntaxe de base de la méthode attr() :

$(selector).attr(attribute)
Copier après la connexion

Parmi eux, le sélecteur représente l'élément spécifié et l'attribut représente le nom de l'attribut à obtenir ou à définir. Si vous souhaitez obtenir la valeur d'un attribut d'un élément spécifié, vous pouvez transmettre le nom de l'attribut dans le paramètre d'attribut. Par exemple, si nous voulons obtenir la valeur de l'attribut de classe d'un certain élément div, nous pouvons l'écrire comme ceci :

var className = $('div').attr('class');
Copier après la connexion

Dans le code ci-dessus, $('div') signifie sélectionner tous les éléments div, et attr(' class') signifie obtenir les valeurs de ces éléments, la valeur de l'attribut de classe. Si vous souhaitez définir la valeur d'attribut d'un élément, vous devez transmettre le nom d'attribut et la valeur d'attribut dans le paramètre d'attribut. Par exemple, si nous voulons changer la valeur de l'attribut src d'un élément img en newImg.png, nous pouvons l'écrire comme ceci :

$('img').attr('src', 'newImg.png');
Copier après la connexion

Lorsque vous utilisez la méthode attr() pour obtenir la valeur de l'attribut tag, vous devez faire attention aux points suivants :

  • Si le sélecteur S'il y a plusieurs éléments correspondants, seule la valeur d'attribut du premier élément sera renvoyée.
  • Si la propriété n'existe pas, renvoyez undéfini.
  • Si le nom de l'attribut est mal écrit, undefined sera également renvoyé.

2. Méthode prop()

La méthode prop() est similaire à la méthode attr() et est également utilisée pour obtenir ou définir la valeur d'attribut de l'élément spécifié. La différence est que la méthode prop() est principalement utilisée pour obtenir ou définir certains attributs spécifiques à un élément, tels que vérifié, sélectionné, etc. Voici la syntaxe de base de la méthode prop() :

$(selector).prop(property)
Copier après la connexion

Parmi eux, le sélecteur représente l'élément spécifié et la propriété représente le nom de l'attribut à obtenir ou à définir. Si vous souhaitez obtenir la valeur d'une propriété d'un élément spécifié, vous pouvez transmettre le nom de la propriété dans le paramètre property. Par exemple, si nous voulons obtenir la valeur de l'attribut vérifié d'un élément de case à cocher, nous pouvons l'écrire comme ceci :

var isChecked = $('input[type=checkbox]').prop('checked');
Copier après la connexion

Dans le code ci-dessus, $('input[type=checkbox]') signifie sélectionner tous les éléments de case à cocher, prop('checked') Indique l'obtention de la valeur de l'attribut vérifié de ces éléments. Si vous souhaitez définir la valeur d'attribut d'un élément, vous devez transmettre le nom d'attribut et la valeur d'attribut dans le paramètre de propriété. Par exemple, si nous voulons définir la valeur de l'attribut vérifié d'un élément de case à cocher sur true, nous pouvons l'écrire comme ceci :

$('input[type=checkbox]').prop('checked', true);
Copier après la connexion

Lorsque vous utilisez la méthode prop() pour obtenir la valeur de l'attribut label, vous devez faire attention à la points suivants :

  • Si le sélecteur correspond. S'il y a plusieurs éléments, seule la valeur d'attribut du premier élément sera renvoyée.
  • Si la propriété n'existe pas, renvoyez undéfini.
  • Si le nom de l'attribut est mal écrit, undefined sera également renvoyé.

3. Méthode data()

La méthode data() est une autre méthode courante dans jQuery pour obtenir la valeur de l'attribut label. Elle est utilisée pour obtenir l'attribut de données personnalisé de l'élément spécifié. Voici la syntaxe de base de la méthode data() :

$(selector).data(key)
Copier après la connexion

Parmi eux, le sélecteur représente l'élément spécifié et la clé représente le nom de l'attribut de données personnalisé à obtenir. Par exemple, si nous voulons obtenir la valeur de l'attribut de données personnalisé data-id d'un certain élément div, nous pouvons l'écrire comme ceci :

<div data-id="123"></div>
Copier après la connexion
var dataId = $('div').data('id');
Copier après la connexion

Dans le code ci-dessus, $('div') signifie sélectionner tous les div éléments, data('id' ) signifie obtenir la valeur de l'attribut de données personnalisé data-id de ces éléments. Si vous souhaitez définir un attribut de données personnalisé d'un élément, vous devez transmettre le nom et la valeur de l'attribut dans la méthode data(). Par exemple, si nous voulons définir l'attribut de données personnalisé data-name d'un élément div sur myName, nous pouvons l'écrire comme ceci :

$('div').data('name', 'myName');
Copier après la connexion

Lorsque vous utilisez la méthode data() pour obtenir la valeur de l'attribut label, vous devez payer attention aux points suivants :

  • Si s'il y a plusieurs éléments correspondant au sélecteur, seule la valeur de l'attribut de données personnalisé du premier élément sera renvoyée.
  • Si l'attribut de données personnalisé n'existe pas, il renvoie undéfini.
  • Si le nom de l'attribut de données personnalisé est mal écrit, undéfini sera également renvoyé.

Conclusion

Ci-dessus sont plusieurs méthodes courantes permettant à jQuery d'obtenir les valeurs d'attribut de balise. Dans le développement réel, nous pouvons choisir la méthode appropriée en fonction des besoins réels. Il convient de noter que différentes méthodes conviennent à différents types d'attributs et que nous devons choisir en fonction de la situation réelle.

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