数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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() 方法设置或返回所选元素的属性和值。如果 jQuery attr() 返回属性，则它返回匹配的 HTML 元素的第一个值。如果 jQuery 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 属性方法。
在点击按钮之前，背景颜色显示为黑色，点击按钮后颜色更改为绿色。
结论
在本文中，我们演示了如何更改元素 ID 以及示例。我们在这里看到了两个不同的示例，在第一个示例中，我们使用了 attr() 方法和 onclick 事件在点击按钮后更改元素 ID。在第二个示例中，我们使用了 prop() 方法和 onClick 事件在点击按钮后更改元素 ID。
6K+ 次查看
