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

Question

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

jQuery .prop（）页面说了以下内容：

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

但是关于性能.prop（）似乎比.val（）设置值更好：

所以我没有答案。 我该做什么？

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

要么

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

EDIT1： .prop（）总是优于.val（）

编辑2：我现在尝试获取一个值 ，也.prop（）更快

EDIT3：正如@BeatAlex所说，如果我们想要性能本机js 非常快

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

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

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

Answer 1

你想使用val() 。 这就是功能是干什么用的，专门为val输入UE。

写入也更快，更容易理解，使用val ，如果需要，可以多次更改值。

你的图表说

越高越好

和val()更高。

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

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

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

$('input').val();

另外作为旁注，运行测试后发布的链接显示val()比prop()更快。

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

取自此链接

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

Answer 2

老兄，你无法将道具与val进行比较，这没有任何意义！

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

当然你可以通过使用attr（'value'）或prop（'value'）来解决val ，但为什么要制作样板代码？

你似乎对道具的设计感到困惑。 所以让我解释一下。

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() 。

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

使用val()来设置一个元素的值可能就是这个函数的意思，这通常会优先使用特定于操作的函数，而不是使用泛型函数。

在你的情况下，如果你不想松散甚至性能的轻微变化，那么请使用prop()本身。

Answer 4

其他答案很好地解释了一个例外的主要差异。

由于jQuery“规范化”浏览器差异，因此val（）会删除回车符。

这会影响IE 8及更低版本中的 textareas。

示例：对于textarea输入

HEL


LO

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

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

Answer 5

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

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

Answer 6

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

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