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
PHPzoriginal
2023-04-06 08:54:395359parcourir

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)

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');

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');

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)

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');

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);

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)

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>
var dataId = $('div').data('id');

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');

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!

Déclaration:
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