.prop() VS .val()。使用jQuery设置输入文本的值

Question

阅读了有趣的 .prop() vs .attr() 和 jQuery性能:属性 后，我对使用什么更好：.prop() 还是 .val() 产生了疑问？我想设置一个输入文本值。 jQuery .prop()页面 上说：

“属性通常会影响DOM元素的动态状态，而不改变序列化的HTML属性。例如，input元素的value属性，inputs和buttons的disabled属性，或checkbox的checked属性。应该使用.prop()方法来设置disabled和checked，而不是.attr()方法。应该使用.val()方法来获取和设置value。”

但是关于 .prop() 的性能，似乎比 .val() 更适合设置值： 所以我没有答案。我该怎么做？

$('#element').prop('value', 'Example');

或者

$('#element').val('Example');

编辑1： .prop()始终优于.val() 编辑2： 我已经尝试了获取值，而且.prop()更快 编辑3： 正如@BeatAlex所说，如果我们想要性能，本地js是极其快速的

var x = document.getElementById('element').value;

正如你们中的一些人所说，这可能会更快，但如果.val()存在，我们将使用它。

PS：在我写这篇文章时，当前的jQuery版本是1.11或2.1

- Mikel

---

我建议使用 val()，因为它是一个获取值的函数（显而易见），并且该函数的操作可能在未来发生更改，但您的代码则不需要更改。 - Reinstate Monica Cellio

不用担心这种性能问题，你永远不需要一次设置成千上万个元素的值，至少你不应该这样做。 - A. Wolff

我刚刚发现了.prop()的存在，并正在寻找良好的实践经验 :-) - Mikel

Answer 1

你想要使用val()。这个函数专门用于获取输入框的值。

而且使用val()更简便易懂，如果需要，还可以多次更改该值。

你的图表显示：

数值越高越好

并且要使用val()来获得更高的数值。

另外，就像你已经引用的那样：

应该使用.val()方法来获取和设置值。

这意味着除非你处理禁用属性，否则请使用:

$('input').val();

补充一下，你发的链接经过测试，显示出val()比prop()更快。

既然你喜欢展示一些图表和图片，我也来加上一些：

来自这个链接

如果你在争论速度的话，纯JS更好。

- Albzi

---

我同意你的观点，即.val()更加合乎逻辑，但就性能而言，我并不赞同。我会上传屏幕截图。 - Mikel

我已经编辑了我的第一篇帖子，并上传了截图，您可以看到.prop()始终更好。我进一步进行了另一个jsperf测试，这次是获取值（而不是设置）。同样，.prop()更好，这是事实。正如人们所说，可能更好地使用.val()，因为它是为此而制作的，但更快的是.prop()。 - Mikel

如果我们要追求速度，最好使用普通的JavaScript而不是jQuery，只需使用element.value@OceanicSix。 - Albzi

算了，看这个：http://jsperf.com/jquery-val-vs-element-value/3 @OceanicSix - Albzi

Answer 2

伙计，你不能将prop和val进行比较，那没有任何意义！ val用于从当前选定的节点中设置/获取属性"value"。因此，这是您需要的唯一方法。(我想设定一个输入文本值)。

当然，您可以通过使用attr('value')或prop('value')来解决val问题，但是为什么要写模板代码呢？

您似乎对prop的设计目的感到困惑。所以让我稍微解释一下。 prop旨在解决从选定DOM节点检索类似布尔属性的属性的问题。它应该与方法attr而不是val进行比较。

请考虑以下四种情况。

<input type="checkbox" checked />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="true" />

• 使用 val() 方法无法检查获取输入控件的选中/未选中状态。
• 如果使用 attr('checked') 方法来获取控件的选中状态，您无法确定其选中状态。它会返回一个字符串。
• 如果在 if 语句中使用 attr('checked') 的结果，则有可能出现错误的判断，例如： if('false')。

要始终正确地获取控件的选中状态，请使用 prop 方法。

因此，如果要进行真正的比较，请与 attr 而不是 val 进行比较。

- Adrian Salazar

---

那么我说错了什么？我不明白你的观点。你只是确认了我的观点。 - Adrian Salazar

你真的读了我的帖子吗？我从未说过在你的情况下使用prop。我只是说他所做的是错误的。而且比较是完全没有用的。所以不要大惊小怪，也不要曲解我的话。 - Adrian Salazar

哦，我完全理解错了！请重新表述第一句话！我以为你在说使用“val”是无意义的！如果你像那样阅读帖子的其余部分，你就能明白我的想法了！现在我会给你一个+1，因为它对我有意义，但也许可以改变第一句话的措辞！ - Albzi

+1 对你来说也是，快速而正确的答案。我只是希望这个孩子真正学会 prop 解决了什么问题。 - Adrian Salazar

Answer 3

其他答案已经很好地解释了主要区别，但有一个例外。

由于jQuery“规范化”了浏览器的差异，val()会删除回车符。

这会影响到IE 8及以下版本中的文本区域。

例如：

对于文本区域输入

HEL

LO

.val()会给出字符串"HEL\n\nLO"，长度为7

.prop("value")会给出字符串"HEL\r\n\r\nLO"，长度为9

- Andy Hubbard

Answer 4

你的图表显示，在性能方面，prop()比val()更好。 val()可能在内部使用与prop()相同的逻辑以及一些额外的代码语句来完成实际操作（例如：设置值），val()的这些额外代码可能导致略微低于prop()的性能。

如果要为元素设置值，则使用val()会很好，也许这就是该函数的用途，但通常最好使用特定于操作的函数而不是使用通用函数。

在你的情况下，如果你不想失去任何性能上的差异，那么就直接使用prop()。

- Siva

Answer 5

这不是性能问题，它们实际上是为完全不同的事情而设计的。jQuery似乎已经决定处理“超出规范”的用例，可能是有充分理由的。

• attr() 用于访问元素的HTML属性。更可能是页面加载时的初始值。但是，它可能已被写入版本的attr()或任何其他属性操作函数所更改
• prop() 用于访问元素解析和显示后的DOM属性。
• val() 用于访问表单元素的值。

- challet

Answer 6

在使用prop()时还有一个bug。在IE 11下，以下代码将无法设置值：

var props = {'value':'test', 'type':'radio'};
var input = $('<input/>').prop(props);
$(document.body).append(input);

- Black Mantha