Comment changer l'identifiant de l'élément à l'aide de jQuery ?-js tutoriel-php.cn

Comment changer l'identifiant de l'élément à l'aide de jQuery ?

WBOY

Libérer： 2023-08-24 09:49:42

avant

1526 Les gens l'ont consulté

如何使用 jQuery 更改元素 id？

jQuery est l'une des bibliothèques JavaScript rapides, petites et riches en fonctionnalités. Il est utilisé pour effectuer la gestion d'événements, l'animation, etc. C'est une combinaison de polyvalence et d'évolutivité. jQuery est utilisé pour simplifier les appels AJAX et la manipulation DOM.

En utilisant jQuery, nous pouvons rendre les pages Web interactives en répondant aux événements de clic de souris. jQuery inclut des fonctionnalités telles que des événements, des effets, des animations, Ajax, l'analyse JSON, la prise en charge de plusieurs navigateurs et l'extensibilité. Il est distribué sous la forme d'un seul fichier JavaScript qui définit toutes les interfaces telles que le DOM, les événements et les fonctions Ajax.

jQuery se compose de deux fonctions, l'une est une fonction utilitaire statique et l'autre est une méthode objet.

Nous pouvons utiliser la fonction attr() dans jQuery pour modifier la valeur de l'identifiant de l'élément. Vous pouvez également utiliser la fonction prop() .

Discutons en détail de ces deux méthodes de jQuery.

Méthode 1 : utilisez la méthode jQuery attr()

C'est l'un des moyens de changer l'ID d'un élément. Vous pouvez utiliser la méthode attr() pour définir ou renvoyer les attributs et les valeurs de l'élément sélectionné. Si jQuery attr() renvoie cet attribut, il renvoie la première valeur de l'élément HTML correspondant. Si jQuery attr() définit une valeur d'attribut, il définit un ou plusieurs attributs ou paires de valeurs pour un ensemble d'éléments HTML correspondants.

Grammaire

Ce qui suit est la syntaxe de la méthode attr() -

Pour renvoyer la valeur de l'attribut, ressemblez à ceci -

$(selector).attr(attribute)

Copier après la connexion

Pour définir les valeurs et les propriétés

$(selector).attr(attribute, value)

Copier après la connexion

Définissez les valeurs et les propriétés à l'aide des fonctions comme indiqué ci-dessous -

$(selector).attr(attribute, function(index, currentvalue))

Copier après la connexion

Pour définir plusieurs valeurs et propriétés, utilisez ce qui suit -

$(selector).attr({attribute:value, attribute:value,…})

Copier après la connexion

Paramètres

Propriété - Spécifiez le nom de la propriété.
value - la valeur spécifiée de l'attribut.
function(index,currentvalue) - Spécifiez une fonction qui renvoie la valeur de la propriété à définir. Ici, index reçoit la position de l'index dans l'élément de la collection. currentvalue reçoit la valeur d'attribut actuelle de l'élément sélectionné.

Exemple

Dans ces exemples, nous utiliserons la méthode attr() de jQuery pour modifier l'ID de l'élément.

<html>
<head>
   <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   <style>
      #myColor {color: white; background: black; padding:30px; height: 90px; width: 400px;
      }
      #newColor {background: pink; width: 650px; color: white; padding:30px; height: 90px;
      }
   </style>
</head>
<body>
   <div id="myColor"><p style="text-align:center;">Changing the Element ID</p> </div><br>
   <button onclick = "myFuntion()"> Click here </button>
   <script>
      function myFuntion() {
         $("div").attr('id', 'newColor');
      }
   </script>
   </center>
</body>
</html>

Copier après la connexion

Comme nous l'avons vu dans l'exemple, nous avons utilisé ici la méthode attr() qui sert à changer l'ID d'un élément HTML, c'est une méthode d'attribut jQuery. Nous devons importer la bibliothèque jQuery pour exécuter les fonctions liées à jQuery.

Vous pouvez utiliser la méthode attr() pour définir ou renvoyer les attributs et les valeurs de l'élément sélectionné. Si vous utilisez jQuery attr() pour renvoyer un attribut, la valeur du premier élément correspondant est renvoyée. Ces méthodes de propriété modifient l'ID de l'élément.

Avant de cliquer sur le bouton, la couleur d'arrière-plan apparaît noire et une fois que nous cliquons sur le bouton, la couleur d'arrière-plan devient rose.

Méthode 2 : utilisez la méthode prop()

Nous pouvons modifier l'ID d'un élément HTML en utilisant la méthode prop(). Il est utilisé pour définir ou renvoyer les attributs et les valeurs de l'élément HTML sélectionné. Lorsque vous utilisez jQuery prop() pour renvoyer une valeur de propriété, la valeur du premier élément correspondant sera renvoyée. Si vous utilisez la méthode jQuery prop() pour définir la valeur d'une propriété, une ou plusieurs propriétés d'un ensemble de paires de valeurs qui correspondent aux éléments qui constituent une collection.

Ce qui suit est la syntaxe de la méthode prop() -

est utilisé pour renvoyer la valeur de l'attribut, comme suit -

$(selector).prop(property)

Copier après la connexion

Pour définir les propriétés et les valeurs

$(selector).prop(property, value)

Copier après la connexion

Définissez les propriétés et les valeurs à l'aide des fonctions comme indiqué ci-dessous -

$(selector).prop(property, function(index, currentvalue))

Copier après la connexion

Définissez plusieurs propriétés et valeurs comme suit -

$(selector).prop(property:value, property:value,…))

Copier après la connexion

Paramètres

Attribut - Spécifiez le nom de l'attribut
value – Spécifiez la valeur de l'attribut
function(index,currentvalue) – Spécifiez une fonction qui renvoie la valeur d'attribut à définir. Ici, index reçoit la position d'index de l'élément HTML dans la collection. currentvalue reçoit la valeur d'attribut de l'élément actuellement sélectionné.

Exemple

Prenons un autre exemple et voyons comment modifier l'ID de l'élément à l'aide de la méthode prop().

<html>
<head>
   <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   <style>
      #myColor {color: white; background: black; padding:30px; height: 90px; width: 550px;
      }
      #newColor {background: green; width: 550px; color: white; padding:30px; height: 90px;
      }
   </style>
</head>
<body>
   <div id="myColor"><p style="text-align:center;">Changing the Element ID</p> </div><br>
   <button onclick = "myFuntion()"> Click here </button>
   <script>
      function myFuntion() {
         $("div").prop('id', 'newColor');
      }
   </script>
   </center>
</body>
</html>

Copier après la connexion

Comme nous l'avons vu dans l'exemple, nous utilisons ici la méthode prop() pour modifier l'ID de l'élément HTML, qui est une méthode d'attribut jQuery.

Avant de cliquer sur le bouton, la couleur d'arrière-plan apparaît noire et une fois que nous cliquons sur le bouton, la couleur d'arrière-plan devient verte.

Conclusion

Dans cet article, nous montrons comment modifier l'ID de l'élément avec un exemple. Nous voyons deux exemples différents ici, dans le premier exemple, nous utilisons la méthode attr() et l'événement onclick pour modifier l'ID de l'élément après avoir cliqué sur le bouton. Dans le deuxième exemple, nous utilisons la méthode prop() et l'événement onClick pour modifier l'ID de l'élément après avoir cliqué sur le bouton.

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!