jQuery 与 Sizzle 选择器集成

问题

jQuery 通过哪个方法和 Sizzle 选择器结合的？

解答

jQuery 通过 jQuery.find 方法与 Sizzle 选择器引擎集成。在 jQuery 源码中，直接将 Sizzle 赋值给 jQuery.find。

源码中的集成方式

// jQuery 源码中的关键赋值
jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;

// 同时还暴露了其他 Sizzle 方法
jQuery.expr[":"] = jQuery.expr.pseudos;
jQuery.uniqueSort = jQuery.unique = Sizzle.uniqueSort;
jQuery.text = Sizzle.getText;
jQuery.isXMLDoc = Sizzle.isXML;
jQuery.contains = Sizzle.contains;
jQuery.escapeSelector = Sizzle.escape;

jQuery.find 的使用

// 当我们使用 $() 选择器时
$('#myId');
$('.myClass');
$('div > p');

// 内部实际调用的是 jQuery.find，也就是 Sizzle
jQuery.find('#myId', document);
jQuery.find('.myClass', document);
jQuery.find('div > p', document);

简化的调用流程

// 1. 用户调用
$('div.container > p.text');

// 2. jQuery 初始化函数处理
jQuery.fn.init = function(selector, context) {
    // ...
    // 对于复杂选择器，调用 jQuery.find
    return jQuery.find(selector, context);
};

// 3. jQuery.find 实际就是 Sizzle
// Sizzle 解析选择器并返回匹配的 DOM 元素

验证集成关系

// 在控制台验证（需要引入 jQuery）
console.log(jQuery.find);  // 输出 Sizzle 函数

// 检查是否为同一引用
console.log(jQuery.find === Sizzle);  // true（在可访问 Sizzle 的环境下）

// 直接使用 jQuery.find
var elements = jQuery.find('div', document);
console.log(elements);  // 返回所有 div 元素的数组

关键点

• jQuery.find = Sizzle 是集成的核心代码
• Sizzle 是独立的选择器引擎，可脱离 jQuery 单独使用
• jQuery 3.4+ 已将 Sizzle 代码直接内联到 jQuery 中
• jQuery.expr 对应 Sizzle.selectors，用于扩展自定义选择器
• 简单选择器（如 #id）会走浏览器原生 API 优化，复杂选择器才走 Sizzle