資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究jQuery 中 prop() 和 attr() 方法的區別
jQuery 中的 prop() 和 attr() 方法都用於更改 HTML 元素的屬性和特性，但它們完成的任務略有不同。儘管有時它們可以互換使用，但瞭解它們的不同之處可能有助於您確定哪種方法最適合您的特定用例。讓我們深入本文，瞭解有關 jQuery 中 prop() 和 attr() 方法之間差異的更多資訊。
jQuery prop() 方法
Prop() 是一個 jQuery 方法，用於設定或返回所選元素的屬性和值。當此方法用於獲取屬性值時，它返回第一個匹配元素的值；當它用於設定屬性值時，它為所選元素設定一個或多個屬性。
語法
以下是 prop() 方法的語法
$(selector).prop(property)
示例
讓我們來看下面的示例，我們將在此示例中實現 jQuery prop() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var $val = $("div");
$val.prop("font-size", "1.6em");
$val.append("Property value = " + $val.prop("font-size"));
});
});
</script>
</head>
<body>
<h2>Adding Property</h2>
<button>Click me.!</button>
<br>
<br>
<div></div>
</body>
</html>
當我們執行上述指令碼時，它將在網頁上生成包含文字和點選按鈕的輸出。當用戶點選按鈕時，事件將被觸發並顯示該值。
jQuery attr() 方法
attr() 方法用於設定或返回所選元素的屬性和值。當此方法用於返回屬性值時，它返回第一個匹配元素的值。當此方法用於設定屬性值時，它為匹配的元素設定一個或多個屬性/值對。
語法
以下是 attr() 方法的語法
$(selector).attr(attribute)
示例
考慮以下示例，我們將在此示例中實現 jQuery attr() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="background-color:#E8DAEF">
<center>
<img src="https://tutorialspoint.tw/cg/images/logo.png" alt="LOGO" width="" height="200" />
<br>
<br>
<button>CLICK</button>
</center>
<script>
$(document).ready(function() {
$("button").click(function() {
$("img").attr("width", "350");
});
});
</script>
</body>
</html>
執行上述指令碼後，輸出將彈出，在網頁上顯示更大尺寸的影像以及一個點選按鈕。當用戶點選按鈕時，事件將被觸發並將影像寬度設定為 350。
prop() 和 attr() 方法的區別
讓我們瞭解一下 jQuery 中 prop() 和 attr() 方法的一些區別。
prop() 方法 |
attr() 方法 |
|---|---|
此方法返回當前值。 |
此方法返回預設值。 |
當用戶希望修改 HTML 標籤屬性的值時，通常使用此方法。 |
此方法的主要任務是為 HTML 標籤指定屬性的預設值。 |
根據 DOM 樹，它修改該 HTML 標籤的屬性。 |
它用於更改 HTML 標籤的屬性。 |
語法 - $(selector).prop(property) |
語法 - $(selector).attr(attribute) |
它接受三個引數：值、屬性和函式。 |
它接受三個引數：值、函式和屬性。 |
412 次檢視
