为什么jQuery的:可见选择器在过滤时的工作方式不同？

Question

我今天注意到,:visible当与属性选择器结合使用时,jQuery的选择器会显示意外行为.它的行为取决于
a)它是在内联使用还是在过滤器方法中使用
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

这是一个演示问题的小提琴的链接.

我不希望[required ="required"]匹配具有空白必需属性的元素,并且当它自己用作选择器时它不会,但是当它与:visible选择器配对时它不会.为什么是这样？

Answer 1

差异的根本原因似乎是 Sizzle（jQuery 中的非本机选择器代码）匹配布尔属性，就像required对正式默认属性值进行显式测试时一样。然而，本机querySelectorAll()代码不会，除非该属性实际上具有原始 HTML 中的值。

布尔选择器如requiredorreadonly可以在 HTML 中表达而无需值，但这意味着该值将被视为属性名称本身。

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

就我个人而言，我认为这是一个错误，尽管修复起来可能有些困难，因为属性值实际上是在required通过 . 询问 DOM 节点时报告的getAttribute()。

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

<input required=required ...>

那么就不会有明显的差异，但这似乎有点麻烦。