現象對比
// 方式一：.val() — 顯示值更新，但 HTML 屬性不變
$("#plus").click(function(){
$("#num").val(parseInt($("#num").val()) + 1);
});
// 方式二：.attr("value", ...) — HTML value 屬性同步更新
$("#plus").click(function(){
$("#num").attr("value", parseInt($("#num").val()) + 1);
});
本質區別
| 方法 | 操作對象 | 影響範圍 | 典型用途 |
|---|
.val(value) | 當前值（DOM property） | 用戶可見、表單提交攜帶、JS 讀取 | 表單交互、動態修改輸入框內容 |
.attr("value", value) | 初始屬性（HTML attribute） | 頁面加載初始值、reset() 恢復值、outerHTML 顯示 | 設置默認值、重置表單基準 |
深度解析
.val() — 操作 DOM Property
- 修改
HTMLInputElement.value 屬性
- 即時反映在界面上，用戶輸入、JS 讀取皆獲取此值
- 表單提交時發送的是當前 value
- 不改變 HTML 源碼中的
value="..." 屬性
.attr("value", ...) — 操作 HTML Attribute
- 修改元素的
value 屬性節點
- 等同於
setAttribute("value", ...)
- 影響
defaultValue、form.reset() 行為
- 可通過
element.getAttribute("value") 或查看外層 HTML 看到變化
最佳實踐
表單交互場景：
- 讀取/設置用戶可見值 → 只用 .val()
- 需要重置功能 → 設置
.attr("value", defaultVal) 同時 .val(defaultVal)
- 獲取初始默認值 →
element.defaultValue 或 .attr("value")
驗證代碼
<input id="test" value="0">
<script>
$('#test').val('100');
console.log('Property:', $('#test').val()); // 100
console.log('Attribute:', $('#test').attr('value')); // 0 (未變)
console.log('defaultValue:', document.getElementById('test').defaultValue); // 0
</script>
