JQuery 返回具有空属性选择器的非空输入

Question

在使用 JQuery 提交错误之前，在此处发布此内容以供讨论。

考虑一下这个小提琴：

http://jsfiddle.net/tWPS6/2/

我在 HTML 中设置一个输入的 value 属性，另一个使用 Javascript。然后，我要求 JQuery 选择空输入（值 == "" 的输入）。它返回长度为 1（其中的一个输入是#input2）。

就好像这个空属性选择器在原始 HTML 中基于输入标签的原始值而不是当前值进行选择，即使任何其他检查值属性的方法（如 .value 或 .val ()) 会告诉我它实际上不是空的。

这似乎是 JQuery 中的一个错误。对吗？

Answer 1

首先：

这不是 jQuery 中的错误。

元素之间存在显着差异 属性：

var attr = element.getAttribute('foo');

和一个元素属性：

var prop = element.foo;

This answer 的布局非常好 - 简短的版本是属性与属性是混乱的，浏览器并不总是正确，但 you almost always want to use the property, not the attribute when working with the DOM。

忘记属性。你几乎总是想要一个属性，而不是一个属性。如果同时存在同名的属性和属性，则属性始终表示当前状态，而属性（在大多数浏览器中）表示初始状态。这会影响属性，例如 <input> 元素的 value 属性。

---

如果您现在了解属性簇！@#$，您应该希望看到它的发展方向。

选择器'input[value=""]' 是一个属性选择器。这意味着它不是属性选择器。在您示例的两轮中，$('input[value=""]') 仅匹配 <input id="input2" value=""/>，因为该元素（并且仅该元素）是：

• 具有value 属性，并且
• value 属性等于空字符串。

.val() 设置<input> 元素的 value 属性，而不是 value 属性。顾名思义，属性选择器匹配元素的属性，所以如果属性没有改变，它当然不会选择任何不同的东西。

此外，jQuery 在后台做了各种花哨的东西：

• 提供跨浏览器的一致行为，并且
• 提供与文档一致的行为，并且
• 尤其是.attr()（有quite the checkered past）可能真的很难看。

---

哦，还有最后一个链接：John Resig on jQuery 1.6 and .attr()。 阅读。

Answer 2

尝试一下：

var emptyInputsRound1 = $('input[value=""]');
$('#input2').attr("value",'hi2'); //notice change
var emptyInputsRound2 = $('input[value=""]');
$('#output').text(emptyInputsRound1.length + ', ' + emptyInputsRound2.length);

工作示例：http://jsfiddle.net/fSaQh/