資料結構
網路
關係型資料庫管理系統
作業系統
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+ 次檢視
