7

在现代浏览器中，当使用有效的 CSS 选择器时，jQuery 会利用document.querySelectorAll()来提高性能。document.querySelectorAll()如果浏览器不支持选择器或方法，它会退回到 Sizzle 。

但是，在调试自定义选择器时，我希望始终使用 Sizzle 而不是本机实现。也就是说，我正在尝试实现jQuery 不支持的 CSS3 选择器:nth-last-child()之一。由于现代浏览器原生支持此选择器，因此它的工作原理与链接问题中的描述相同。不过，正是这种行为干扰了我的自定义选择器的调试，所以我想避免它。

我可以使用的一个便宜的技巧是放入一个非标准的jQuery 选择器扩展，从而可以说“使”选择器“无效”。例如，假设 every li:nth-last-child(2)is visible，我可以简单地将其放入，将其转为：

$('li:nth-last-child(2)').css('color', 'red');

进入这个：

$('li:nth-last-child(2):visible').css('color', 'red');

这导致它始终由 Sizzle 评估。除此之外，这要求我对我的页面元素做出一个假设，这可能是真的，也可能不是。我真的不喜欢那样。更不用说，除非绝对必要，否则我一般不喜欢使用非标准选择器。

有没有办法跳过document.querySelectorAll()支持它的浏览器中的本机方法并强制 jQuery 使用 Sizzle 来评估选择器，最好不使用非标准选择器？很可能，这需要调用另一个方法而不是$()，但它比选择器黑客 IMO 好得多。

4

3 回答 3

9

您可以将其设置为null在 jQuery 加载之前，因此它认为它不受支持：

document.querySelectorAll = null;
//load jquery, will trigger not supported branch
//Optionally restore QSA here (save a reference) if needed

这应该使这个评估为false

演示：http: //jsbin.com/asipil/2/edit

注释掉该null行并重新运行，你会看到它会变成红色。

于 2012-07-31T20:11:56.787 回答
3

既然您自己为选择器开发代码，您能否在开发周期内简单地给它一个自定义名称？也许给它你自己的供应商前缀或什么？-bolt-nth-last-child()

这样，你就会知道浏览器肯定不支持它，所以它应该总是使用 Sizzle。

完成开发周期后，您可以删除-bolt-前缀。

我知道这更像是一种解决方法，而不是问题的答案，但这对我来说似乎是最简单的解决方案。

于 2012-07-31T20:59:20.813 回答
0

它看起来是jQuery.find默认的嘶嘶声。这将使您免于通过将本机函数设置为 null 来破坏您的环境。

https://github.com/jquery/jquery/blob/master/src/sizzle-jquery.js#L3

因此，您应该能够执行以下操作，并且它总是会发出嘶嘶声。

$.find('li:nth-last-child(2)')
于 2012-07-31T20:14:58.363 回答