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

【问题标题】：.prop() VS .val() .Setting an input text value with jQuery.prop() VS .val() . 使用 jQuery 设置输入文本值
【发布时间】：2014-04-01 08:37:11
【问题描述】：

在阅读（有趣的）.prop() vs .attr() 和 jQuery Performance : attributes 之后，我的脑海中出现了关于哪个更好用的疑问： .prop() 还是 .val() ？我想设置一个输入文本值。

jQuery .prop() page 说如下：

属性通常会影响 DOM 元素的动态状态，而不会更改序列化的 HTML 属性。示例包括输入元素的 value 属性、输入和按钮的 disabled 属性或复选框的 checked 属性。应该使用 .prop() 方法来设置禁用和检查，而不是 .attr() 方法。 .val() 方法应该用于获取和设置值。

但关于 performance .prop() 似乎比 .val() 设置值更好：

所以我没有答案。我该怎么办？

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

或

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

EDIT1： .prop() 总是比 .val() 好

EDIT2： 我现在试过getting a value，.prop() 也更快

EDIT3： 正如@BeatAlex 所说，如果我们想要性能原生 js 是 extremely faster

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

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

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

【问题讨论】：

我推荐使用val()，纯粹是因为它是一个获取值的函数（duh），并且该函数的操作将来可能需要更改，但您的代码不会。跨度>
别担心这种性能，你永远不必一次设置数千个元素的值，至少，你不应该
我刚刚发现了 .prop() 的存在，我正在寻找好的做法:-)

标签： javascript jquery performance

【解决方案1】：

您想使用val()。这就是函数的用途，特别是对于输入的value。

写起来更快，更容易理解，在使用val时，你可以根据需要多次更改值。

你的图表显示

越高越好

和val() 更高。

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

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

这意味着除非您正在处理禁用的属性，否则请使用：

$('input').val();

另外，the link you posted 在运行测试后表明val() 比prop() 快。

既然你喜欢展示一些图表和图片，我要添加一些：

取自this link

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

【讨论】：

我同意你的观点， .val() 更合乎逻辑，但关于性能我不同意。我会上传截图
当您看到 .prop() 总是更好时，我已经编辑了我的第一篇文章并上传了屏幕截图。这次我更进一步并做了另一个 jsperf 来获取值（无设置）。 .prop() 也更好，这是事实。正如人们所说，使用 .val() 可能会更好，因为它是为此而设计的，但更快的是 .prop()
如果我们要了解事物的速度，最好使用纯 javascript 而不是 jquery，只需使用 element.value@OceanicSix
实际上，放弃它。看看这个：jsperf.com/jquery-val-vs-element-value/3@OceanicSix

【解决方案2】：

伙计，你不能将 prop 与 val 进行比较，这没有任何意义！

val 旨在设置/获取当前选定节点的属性“值”。因此，这是您的用例所需的唯一方法。（我想设置一个输入文本值）。

当然，您可以使用 attr('value') 或 prop('value') 解决 val 问题，但为什么要制作样板代码？

您似乎对 prop 的设计目的感到困惑。所以让我稍微解释一下。

prop 旨在解决从选定的 DOM 节点检索类似布尔的 properties 的问题。它应该与 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

【讨论】：

那我说错了什么？我不明白你的意思。你只是在证实我的观点
你真的看过我的帖子吗？我从来没有说过在你的情况下使用道具。我只是说他的做法是错。而且这种比较完全没用。所以不要拍大戏，也不要把我从没说过的话放在嘴里。
天哪，我确实读错了！改写第一句话！我以为你说使用val 是没有意义的！如果您像那样阅读帖子的其余部分，那么您可以看到我来自哪里！我会给你 +1，因为它现在对我来说很有意义，但可能会改变第一句话的措辞！
也为您+1，快速而正确的答案。我只是想让孩子真正了解 prop 解决了什么问题。

【解决方案3】：

您的图表表明prop() 在性能方面优于val()。

val() 可以在内部使用与prop() 相同的逻辑以及一些额外的代码语句来完成实际操作（例如：设置值），val() 的额外代码可能会导致比@ 稍低的性能987654326@.

最好使用val() 为元素设置值，也许这就是该函数的用途，一般来说，最好使用特定于操作的函数，而不是使用通用函数。

在您的情况下，如果您不想让性能出现细微的变化，那么请使用 prop() 本身。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

这会影响 IE 8 及更低版本中的文本区域。

示例： 对于

的textarea输入 HEL 洛

.val() 为您提供字符串 "HEL\n\nLO" 和长度为 7

.prop("value") 为您提供长度为9 的字符串"HEL\r\n\r\nLO"

【讨论】：

【解决方案6】：

使用prop() 时的另一个错误。在 IE 11 下，以下代码不会设置该值：

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

【讨论】：