如何使用 jQuery 更改元素 id？
Aug 24, 2023 am 09:49 AM
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,…})
參數
屬性 - 指定屬性名稱。
value - 屬性的指定值。
function(index,currentvalue) - 指定一個傳回要設定的屬性值的函數。這裡，索引接收集合內元素中索引的位置。 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,…))
參數
屬性 - 指定屬性名稱
value – 指定屬性值
function(index,currentvalue) – 指定傳回要設定的屬性值的函數。這裡，索引接收集合中 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。
以上是如何使用 jQuery 更改元素 id？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱門文章
熱門文章
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
