.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进行比较