试图理解为什么 .attr('value', 'foo') 有效但 .val('foo') 无效

Question

我以为我理解了整个 prop 与 attr 的关系，但我遇到了一个让我质疑这种理解的案例。

我正在为生成表格的主干视图编写测试，我的测试基本上做了以下事情：

// assert that $table.find('input[value="foo"]').length == 2
$table.find('input[value="foo"]:first').val('bar');
// assert that $table.find('input[value="foo"]').length == 1

奇怪的是，第二个断言失败了。经过大量的头撞墙时间后，我终于尝试了：

// assert that $table.find('input[value="foo"]').length == 2
$table.find('input[value="foo"]:first').attr('value', 'bar');
// assert that $table.find('input[value="foo"]').length == 1

你瞧，我的测试通过了。

现在，我希望我可以发布所有相关代码的小提琴，但是太多了（表 View 单独是 685 行），但我正在寻找一般理解类型的答案，而不是特定的“修复代码中的 X”。而我想要理解的是，为什么会有这样的情况：

$table.find('input[value="foo"]:first').val('bar');

什么都不做，而：

$table.find('input[value="foo"]:first').attr('value', 'bar');

按预期工作？

附：我不应该说.val('bar') 什么也没做。如果我后来做了.val()，它会显示值已经改变......但是如果我检查了实际元素，或者使用了新的选择器，或者类似的东西，很明显val并没有真正改变任何东西.这只会让我更加困惑。

Answer 1

一个简单的例子应该能说明一些事情。假设我们从这个 HTML 开始：

<input id="t1">
<input id="t2">

然后我们执行这个 JavaScript：

$('#t1').val('pancakes');
$('#t2').attr('value', 'pancakes');

从视觉上看，两个<input>s 看起来都一样，它们都会说pancakes。但是，如果您查看底层的 DOM 元素，您会看到：

<input id="t1">
<input id="t2" value="pancakes">

所以使用val 或多或少地模拟了您使用鼠标和键盘摆弄表单元素；这些都不会改变底层元素。然而，调用attr 会改变底层元素，#t2 最终会得到一个真正完整的value 属性（如果你想知道原因，请参阅adeneo's answer）。

为什么差异很重要？我注意到您正在使用属性选择器，因此值得快速了解一下：

$('input[value=pancakes]').length

那将是1，因为只有一个<input>s 甚至具有value 属性，更不用说具有我们正在寻找的值的value。

问题不在于：

$table.find('input[value="foo"]:first').val('bar');

什么都不做，问题是它不做任何属性选择器可以看到的事情，因为val 根本没有对属性做任何事情。

---

上面的简单demo，打开你的控制台看看有趣的东西：http://jsfiddle.net/ambiguous/PNtKk/

Answer 2

val() 直接更改属性，并不会显示在控制台中，而attr() 使用本机setAttribute() 更改属性，以便显示在控制台中。

val() 是设置元素值的正确方法。