如何使用jQuery更改元素的id

jQuery是一个快速、小巧且功能丰富的JavaScript库之一。它用于执行事件处理、动画等操作。它具有多功能性和可扩展性的特点。jQuery用于简化AJAX调用和DOM操作。

使用jQuery，我们可以通过响应鼠标点击事件使网页交互。jQuery包括事件、效果、动画、Ajax、JSON解析、跨浏览器支持和可扩展性等功能。它分发为一个单独的JavaScript文件，定义了所有的接口，如DOM、事件和Ajax函数。

jQuery由两个函数组成，一个是静态实用函数，另一个是对象方法。

我们可以使用jQuery中的attr()方法来更改元素的id值。你也可以使用prop()方法。

让我们详细讨论一下jQuery中这两种方法。

方法1：使用jQuery的attr()方法

这是一种更改元素ID的方法。可以使用attr()方法设置或返回所选元素的属性和值。如果attr()方法返回属性，则返回匹配的HTML元素的第一个值。如果attr()方法设置属性值，则为一组匹配的HTML元素设置一个或多个属性或键值对值。

语法

attr()方法的语法如下：

要返回属性的值，语法如下：

$(selector).attr(attribute)

用于设置值和属性

$(selector).attr(attribute, value)

使用一个函数来设置以下的值和属性−

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

设置多个值和属性使用以下内容：

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

参数

attribute-指定属性名。
value-指定的属性值。
function(index,currentvalue)-指定返回要设置的属性值的函数。这里，index接收集合中元素中索引的位置。currentvalue接收选定元素的当前属性值。

示例

在这些示例中，我们将使用jQuery的attr()方法来更改元素ID。

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

如我们在示例中所看到的，我们使用了attr()方法来改变HTML元素的ID，它是一个jQuery属性方法。我们需要导入jQuery库来执行与jQuery相关的功能。

可以使用attr()方法来设置或返回选定元素的属性和值。如果使用jQuery的attr()方法返回属性，则返回第一个匹配元素的值。这些属性方法用于更改元素的ID。

在点击按钮之前，背景颜色显示为黑色，一旦点击按钮，颜色就会变成粉色。

方法2：使用prop()方法

我们可以使用prop()方法来改变HTML元素的ID。它用于设置或返回选定HTML元素的属性和值。当使用jQuery的prop()方法返回属性值时，返回第一个匹配元素的值。如果使用jQuery的prop()方法设置属性的值，则为一组匹配元素的一个或多个属性-值对设置值。

prop()方法的语法如下所示：

返回属性值的语法如下：

$(selector).prop(property)

设置属性和值

$(selector).prop(property, value)

使用函数设置属性和值，如下所示−

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

将多个属性和值设置如下 –

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

参数

attribute – 指定属性名
value – 指定属性值
function(index,currentvalue) – 指定一个返回要设置的属性值的函数。这里，index接收HTML元素在集合中的索引位置，currentvalue接收当前选定元素的属性值。

示例

让我们举一个示例，看看如何通过使用prop（）方法来改变元素ID。

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

正如我们在示例中所看到的，这里我们使用了prop()方法来改变一个HTML元素的ID，这是一个jQuery属性方法。

在我们点击按钮之前，背景颜色显示为黑色，一旦我们点击按钮，它就会变成绿色。