第二章 jQuery技术解密 (三)

2.3 破解 jQuery 选择器接口

jQuery 选择器功能强大，但是用法简单，它仅仅提供了一个接口：jQuery()，也可以简写为 $() 。用法如此简单，但又具有如此强大的处理能力，使 jQuery 必然成为众人追捧的对象。

在上一节中，我们重点分析了 jQuery 框架的雏形，而对于选择器并没有深入分析，仅仅提供了一个简单的 DOM 元素选择作为演示，目的是方便读者理解该框架的架设思路和过程。本节将重点研究 jQuery 选择器的设计思路、实现过程和工作原理。

2.3.1 简单但很复杂的黑洞

前面说到，jQuery 提供了惟一的接口 (jQuery() 或者 $()) 使选择器与外界进行交流。那么这个对象是如何生成的呢？

jQuery 框架的基础是查询，即查询文档元素对象，因此我们可以认为 jQuery 对象就是一个选择器，并在此基础上构建和运行查询过滤器。

jQuery 查询的结果是获取 DOM 元素，这些查询到的 DOM 元素又是如何存储的呢？

根据前面的介绍，我们初步了解到它把查询的结果存储到 jQuery 对象内。由于查询的结果可能是单个元素，也可能是集合，因此，jQuery 对象内应该定义了一个集合。这个集合专门负责存放查询到的 DOM 元素。这正如 JavaScript 中的 Function 对象一样，其内部也构建了一个集合对象 Arguments ，专门负责存储函数的参数。

但是，Functiono 对象和 Arguments 是两个相互独立的概念，仅通过 arguments 属性联系在一起。也就是说 Arguments 对象并非是 Function 对象的子对象，或者是它的内部组成部分。而 jQuery 对象与查询结果的数据集合就不同了，它是完全作为 jQuery 对象的一部分而存在的。

另外，jQuery 虽然仅提供了一个入口，但是它的构建并不只局限于从 DOM 文档树中查询到 DOM 元素，DOM 元素也有可能从别的集合中转移过来的，或者是从 HTML 片断生成的等。

例如，类似下面的代码在 jQuery 应用中经常会看到。

$("div.red").css("display", "none"); // 将 class 为 red 的 div 元素隐藏显示

var width = $("div .red").width(); // 获取 div 元素下 class 为 red 的元素的宽度

var html = $(document.getElementById("wrap")).html(); // 获取 id 为 wrap 元素的 innerHTML 值

$("#wrap", document.forms[0]).css("color", "red"); // 将在第一个 form 元素下 id 为 wrap 元素的字体颜色设置为红色

$("

").appendTo("#wrap"); // 将 HTML 字符串信息追加到 id 为 wrap 元素的末尾

在 $() 函数中可以包含选择字符串、HTML 字符串、 DOM 对象和数据集合等不同类型的参数。jQuery 是如何分辨这些参数是选择符字符串、HTML字符串、DOM对象或数据集合的呢？

为了方便读者理解这其中的奥妙，我们不妨把 jQuery 框架进行简化，先删除所有方法、函数以及逻辑代码，然后在 init() 构造器中，使用 alert() 方法获取 selector 参数的类型和信息，其代码如下。