.prop（）VS .val（）。使用jQuery设置输入文本值

Question

阅读后（有趣的）.prop() vs .attr()和jQuery Performance : attributes怀疑在我的脑海中出现了什么更好用：.prop（）或.val（）？我想设置输入文本值。

jQuery .prop() page说了以下内容：

  

属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性。示例包括输入元素的value属性，输入和按钮的disabled属性或复选框的checked属性。应该使用.prop（）方法来设置disabled和checked而不是.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

Answer 1

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

编写起来也更快，更容易理解，在使用val时，如果需要，您可以多次更改值。

你的图表说

  

越高越好

和val()更高。

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

  

.val（）方法应该用于获取和设置值。

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

$('input').val();

另外，作为附注，the link you posted在运行测试后显示val()比prop()更快。

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

取自this link

如果你在争论超速，纯粹的JS会更好。

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

Answer 3

您的图表表明prop()在效果方面优于val()。

val()可以在内部使用prop()的相同逻辑以及一些其他代码语句来完成实际操作（例如：设置值），val()的其他代码可能会导致性能低于prop()。

使用val()设置一个元素的值可能就是这个函数的意思，这将是很好的，一般来说，最好使用特定于操作的函数而不是使用泛型函数。 / p>

在您的情况下，如果您不想在性能上略有差异，请与prop()本身一起使用。

Answer 4

其他答案解释了主要区别，但有一个例外。

因为jQuery＆＃34;规范化＆＃34;浏览器差异val（）删除回车。

这会影响 IE 8及以下中的textareas。

示例： 对于

的textarea输入

HEL


LO

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

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

Answer 5

这不是性能问题，它们实际上是针对完全不同的东西而制作的。 jQuery似乎决定处理“超出规范”的用例，可能是有充分理由的。

• attr（）用于访问元素的HTML属性。更可能是页面加载时的初始值。它虽然已经被attr（）的写版本或任何其他属性操作函数
所改变
• prop（）是在解析并显示元素之后访问元素的DOM属性。
• val（）用于访问表单元素值。

Answer 6

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

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