1

我最近遇到了Sel.js，它支持Draft CSS Level 4 选择器（例如Subject 选择器，它可以让您定位匹配的 CSS 节点的父节点）。

我很想开始与jQuery结合使用这个库，并且很好奇是否有人有经验（或对如何完成的一个很好的猜测）用不同的选择器库替换jQuery 所基于的Sizzle.js选择器库（在本例 Sel.js）。

有什么想法或示例可以在网上某个地方查看以将 jQuery 与 Sizzle 解耦，并使其依赖于不同的选择器引擎？

4

1 回答 1

2

这本身不一定是真正的替代品，而是一种后备。当遇到它认为是“无效的语法”时， Sizzle会抛出一个错误，例如 CSS4 主题选择器（div! > .jquery-css4例如）。

> 未捕获的错误：语法错误，无法识别的表达式：div！> .jquery-css4

一种解决方案是针对Sizzlecatch {}抛出的错误，然后尝试回退到 Sel.js进行选择，方法是覆盖以下函数：$()

$ = function (selector, context) {
    try {
        return jQuery(selector, context);
    } catch (e) {
        return jQuery(sel.sel(selector, context));
    }
};

以这种方式覆盖后，您可以使用：

$('div! > .jquery-css4');

...这将正确返回<div>包含 class 子级的 which .jquery-css4。

作为替代方案，您可以创建一个简单的css4选择插件，使用类似：

$.css4 = function(selector, context) { 
    return $(sel.sel(selector, context));
};

此时可以重写上面的内容：

$.css4('div! > .jquery-css4');

这种方法的好处是它不依赖错误处理，并且更具声明性。本质上——你应该知道什么时候使用 CSS4 选择器，需要额外的支持，什么时候不需要。但是 - 这两种方法都是相当非侵入性的。

但是，对于使用这些方法的任何人，请注意：我没有对使用该context参数的查询进行广泛测试。它可能不适合Sel.js- 所以如果您需要更进一步，请注意您可能需要进一步增强此代码。

这是一个有效的 jsFiddle，显示了实际代码。

于 2013-05-03T21:28:42.853 回答