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

Posted 2023-05-09

【中文标题】JQuery 返回具有空属性选择器的非空输入

【英文标题】：JQuery returns non-empty inputs with empty attribute selector

【发布时间】：2011-10-15 14:16:18

【问题描述】：

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

考虑一下这个小提琴：

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

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

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

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

【参考方案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()。 阅读。

【讨论】：

事实上我过去读过 .attr() 。那么您是否建议在我的代码中设置输入值的所有代码都应该使用 .attr() 而不是 .value 和 .val() 进行设置？这是一个严重的重写 - 可能对代码大小有点有害。

不，所有设置值的代码都应该坚持.val()。您不能使用 attribute 选择器按值选择，所以这就是您要更改的内容。

是的，只是试图找到最便宜的代码路径（此时只是因为似乎应该有一个）。 JQuery 中似乎应该有一个 $(selector).has(function(tag) return ; 来处理这些常见情况。感谢您的回答！

那个确实存在。它被称为.filter()。我只是在寻找我以前的答案... edit 啊，here it is

$.grep() 与.filter() 相似，但并不完全相同。不过，$.grep() 的名字并不好，因为它与正则表达式无关。

【参考方案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/

【讨论】：

但是，当它像这样设置时：jsfiddle.net/fSaQh/1 回到奇怪的结果。这看起来真的是 JQuery 中的一个错误。

这很奇怪，似乎 .val() 可能只会影响包装元素的 jquery 对象而不是实际的 dom，而 attr() 会更改 dom，我很想看看一些 jquery 专家对此不得不说