javascript - 为什么 jQuery 的 :visible selector work differently when filtered?

Question

我今天注意到 jQuery 的 :visible 选择器在与属性选择器结合使用时会出现意外行为。它的行为因
而异a) 是内联使用还是在filter方法内使用
b) 与它结合的属性选择器的类型

例子:

给定以下标记

<input required name="name" type="text" />

以下对于 jQuery 是正确的

$('[required="required"]').filter(':visible').length == 0; //true
$('[required="required"]:visible').length == 0; //false - why does jquery find the input?

disabled 属性显示了类似的行为。但是，数据属性不显示相同的行为:

给定以下标记

<input data-boolean name="name" type="text" />

以下对于 jQuery 是正确的

$('[data-boolean="true"]').filter(':visible').length == 0; //true
$('[data-boolean="true"]:visible').length == 0; //true

这是一个指向 fiddle 的链接这说明了问题。

我不希望 [required="required"] 匹配具有空白 required 属性的元素，当单独用作选择器时它不会匹配，但当与 :visible 选择器配对时它会匹配。 这是为什么？

Answer 1

差异的根本原因似乎是当对正式的默认属性值进行显式测试时，Sizzle(jQuery 中的非本地选择器代码)匹配 bool 属性，如 required。但是， native querySelectorAll() 代码不会这样做，除非该属性实际上具有原始 HTML 中的值。

required 或 readonly 等 bool 选择器可以在没有值的 HTML 中表示，但这意味着该值将被视为属性名称本身。

当您使用像:visible 这样的伪类时，Sizzle 意识到 native 代码将无法工作，因此它会接管。导致问题的不是 :visible 测试本身；您可以使用 :text 或 Sizzle 支持的任何其他扩展获得相同的效果(显然这不会改变选择器的意义)。

我个人认为这是一个错误，尽管它可能有点难以修复，因为当通过 getAttribute()< 查询 DOM 节点时，属性值确实被报告为 required/.

如果要精心编写 HTML 代码并完全指定属性:

<input required=required ...>

那么就没有感知上的差异，但这似乎有点麻烦。