語法速查
// 取得屬性值
$(selector).prop(propertyName) // 回傳字串/布林/數值/undefined
// 設定單一屬性
$(selector).prop(propertyName, value) // value 可為字串/布林/數值/函數
// 批次設定
$(selector).prop({ prop1: val1, prop2: val2 })
// 函數式設定 (1.4+)
$(selector).prop(propertyName, function(index, oldValue) {
return newValue;
});
回傳值型別對照
| 屬性 | HTML | prop() 回傳 | attr() 回傳 |
|---|
| checked | <input checked> | true (布林) | "checked" (字串) |
| disabled | <button disabled> | true | "disabled" |
| value | <input value="abc"> | "abc" (目前值) | "abc" (初始值) |
| selectedIndex | <select>...</select> | 數值 (索引) | undefined |
| 自訂 showed | <div showed="true"> | "true" (字串) | "true" (字串) |
實戰範例：切換顯示/隱藏狀態
function toggleShow(el) {
var $el = $(el);
var isShown = $el.prop("showed"); // 取得字串 "true"/"false"
$el.prop("showed", isShown === "true" ? "false" : "true");
// 對應 CSS 切換
$el.toggleClass("hidden", $el.prop("showed") === "false");
}
關鍵提醒
prop() 操作的是 DOM Property，即時反映瀏覽器內部狀態attr() 操作的是 HTML Attribute，對應標記原始值- 表單元素 (
checked, selected, value, disabled) **永遠用 prop()**
- 自訂屬性建議加
data- 前綴 (data-showed)，配合 .data() 可自動型別轉換
