jQuery的.val()和.attr('value')有什么区别？

Question

我认为标题已经足够清楚了

- The Coding Monk

---

jQuery .val() vs .attr("value")：https://dev59.com/QGsy5IYBdhLWcg3wzBF4 - Adriano

Answer 1

.val() 可以对所有输入元素进行有用的操作，包括 <select>...即使在多选框、复选框和单选按钮（其中.val()获取或设置了一个选定值的数组而不仅仅是一个字符串）的情况下也是如此。

所以基本上它们具有不同的用途，即使在某些情况下，比如文本框中，.attr('value') 的行为相同。首选方法是使用.val() 以便在任何情况下都能获得一致的行为。

---

为了好玩，这里有一个对于复选框的不太常见的例子，可以让.val()非常方便：

<input name="mytest" type="checkbox" value="1">
<input name="mytest" type="checkbox" value="2">
<input name="mytest" type="checkbox" value="3">
<input name="mytest" type="checkbox" value="4">

您可以这样做：

$("input[name='mytest']").val([1, 2, 3]);

这将选中前三个框。 你可以在这里试一下。

- Nick Craver

---

感谢您提供这个不太常见的例子。 - ScottE

写得很好！你可能想在交叉浏览器规范化上添加一个简短的解释，jQuery使用这种方法来实现。 - mekwall

请注意，.attr('value') 读取的是原始值，而不是当前状态。另请参见。 - XML

尽管这个答案有很好的解释，但在我看来它并不是这个问题的确切答案。 - QMaster

Answer 2

.attr('value')返回编辑输入框之前的值。而.val()返回当前的值。

- actis

Answer 3

在actis的答案中，还需补充一点...

此外，.attr('value')返回编辑输入框之前的值，而.val()返回当前值。

当使用文本输入框时，.attr()和.val()的setter方法有所不同。

.val('newval')

将设置用户在页面上看到的值，并更新后续.val()方法调用返回的值。它不会设置元素的value属性。

另一方面

.attr('value','newval')

该元素的value属性将被设置。如果用户尚未输入并且.val（newval）未被调用，则这样做也会在视觉上更新控件，并更新.val（）返回的值。

您可以通过以下jsfiddle进一步了解：

https://jsfiddle.net/jasonnet/vamLww2k/

祝好运。

- user3624334

---

是的，完全正确... - Vahid Momeny