3.3　使用Sizzle引擎

本节将简单介绍Sizzle引擎的安装和使用，同时了解其基本工作流程。

3.3.1　安装Sizzle

下面演示在网页中安装Sizzle引擎。

第1步，访问Sizzle官网（https://sizzlejs.com/），下载Sizzle引擎压缩包。

提示：或者访问https://github.com/jquery/sizzle下载。

第2步，在网页头部区域导入sizzle.js库文件。

     <script src="sizzle/sizzle.js"></script>

第3步，在页面主体区域输入下面HTML代码和JavaScript脚本。

     <P>床前明月光</P>
     <p>疑是地上霜</p>
     <script>
     console.dir(Sizzle("p") );
     </script>

第4步，使用Chrome浏览器查看页面，在控制台（按F12键）中可以看到Sizzle匹配两个DOM元素，以数组的形式返回，如图3.1所示。

图3.1　使用Sizzle匹配元素

3.3.2　嵌入jQuery

在默认状态下，jQuery内置了Sizzle引擎。用户直接使用jQuery()即可调用Sizzle。主要代码如下：

在jQuery库中，把Sizzle引擎传递给变量Sizzle，然后再把内部主要接口向jQuery开放，实现无缝对接。

3.3.3　jQuery与Sizzle协作

下面以一个简单示例演示jQuery与Sizzle是如何协同操作的，从而达到在jQuery中调用Sizzle，并获取一个符合条件的jQuery对象。

第1步，新建页面，导入jQuery库文件。然后，构建如下示例代码。

     <script src="jquery/jquery-3.2.1.js"></script>
     <P>床前明月光</P>
     <p>疑是地上霜</p>
     <script>
     console.dir(jQuery("p") );
     </script>

第2步，在Firefox浏览器中先查看一下结果，按F12键，可以在控制台显示匹配的集合，如图3.2所示。

图3.2　使用jQuery匹配元素

注意：这里的匹配集合是一个jQuery对象，也就是一个普通对象，与Sizzle引擎直接返回的数据集合是不同的，Sizzle直接返回的是一个数组，而不是一个对象。

第3步，把"p"传入jQuery()之后，又被传给了init()函数，过程如下：

     //传入：
     jQuery = function (selector, context) {
         return new jQuery.fn.init(selector, context);
     }
     //再传给：
     init = jQuery.fn.init = function (selector, context, root){ }

第4步，在init()函数内对字符串selector进行处理，如果是CSS选择器字符串，则再传给find()。代码如下：

     } else if (!context || context.jquery) {
          return (context || root).find(selector);
     } else {
          return this.constructor(context).find(selector);
     }

第5步，根据上下文的不同，最后都调用jQuery对象的find()方法。find()方法的源码如下：

在上面代码中，如果selector不是string，则调用jQuery的filter()方法，过滤的条件是一个function，其中调用了contains()方法。

第6步，在find()方法中，调用jQuery.find()执行Sizzle选择器引擎。

     jQuery.find(selector, self[i], ret)

第7步，jQuery.find正引用了Sizzle，从而完成jQuery选择器工作流程，代码如下：

     jQuery.find = Sizzle;
上一章目录下一章