javascript – 为什么* [checked]表现得像：使用jQuery的过滤方法时检查过？

2023年12月18日 202次阅读

继
previous question之后.

假设我在装有jQuery 1.5.2的页面上有两个复选框

<input id="test1" type="checkbox"/>
<input id="test2" type="checkbox"/>

然后让我们点击它们以给每个被检查的属性.
现在让我们抓住所有复选框并过滤掉未选中的复选框

var numOfCheckedBoxes = $("input:checkbox").filter("*[checked]").size();

现在基于previous question的答案,我希望numOfCheckedBoxes等于0但它等于2.我现在应该使用$(“input：checkbox：checked”)或$(“input：checkbox”).filter(“ ：检查“).

这与我不同

var numOfCheckedBoxes = $("#test1").filter("*[checked]").size();

将numOfCheckedBoxes设置为0.
这是first scenario in question的jsFiddle.
这是second scenario in question的jsFiddle.

最佳答案 因为在现代浏览器中,DOM选择将使用querySelectorAll完成.

这意味着在进行DOM选择时,* [checked]实际上会查找该特定属性.

当您在DOM选择中执行’：checked’时,您正在使用无效CSS的Sizzle扩展,因此不使用querySelectorAll,因此使用Sizzle,它会查看属性以及属性.

所以区别在于.filter()没有/不能使用querySelectorAll,这意味着你将获得Sizzle给出的专有行为而不是有效的DOM行为.

如果Sizzle实际上是querySelectorAll的兼容性补丁会很好,但事实并非如此,所以你必须处理由此产生的不一致性.

编辑：

似乎有一个优化,如果针对多个元素调用filter(),则使用Sizzle,但如果只使用一个元素,则使用().

这很重要,因为is()将在拥有它的浏览器中使用matchesSelector,而matchesSelector将提供与querySelectorAll相同的评估.该评估与Sizzle不同.

点赞