jQuery .val() 在HTML代码块上无效？

Question

我不明白为什么这段代码不能按预期工作：

var $obj = jQuery('<div>xx<input type="text" value="" />xx</div>');
$obj.find('input').val('testing');
console.log($obj.html());

输出结果没有任何变化 - 即数值没有变化。但是append()和其他函数正常工作。可能出了什么问题?

- Luke

---

设置.value属性从未更改由html()序列化的value属性。 - Bergi

可能是为什么一些技术上可序列化的输入属性不可序列化？的重复问题。 - Bergi

Answer 1

value是输入对话框的一个属性。

使用.val(...)更改的是值属性而不是DOM中的值。

有关属性和特性之间的区别，请参见此处。

---

如果您想要在值属性中看到实际更改，则可以像这样操作：

var $obj = jQuery('<div>xx<input type="text" value="" />xx</div>');
$obj.find('input').attr('value','testing');
console.log($obj.html());

Demo: http://jsfiddle.net/maniator/YsZLt/

- Naftali

Answer 2

"value" 属性映射到 .defaultValue 属性。

没有属性映射到 .value 属性。但是，在 非脏输入 上，您可以设置属性 "value"（和显然的 .defaultValue），这将反映在属性 .value 中。

由于您的输入是非脏的，因此您可以这样做

var $obj = jQuery('<div>xx<input type="text" value="" />xx</div>');
$obj.find('input').prop('defaultValue', 'testing');
console.log($obj.html());
//xx<input type="text" value="testing">xx

- Esailija

---

为什么要踩这个回答？是的，你应该鼓励模糊和不精确的回答！ - Esailija