jQuery源码分析之init的详细介绍

init 构造器

由于这个函数直接和 jQuery() 的参数有关，先来说下能接受什么样的参数。

源码中接受 3 个参数：

init: function (selector, context, root) { ...}

jQuery() ，空参数，这个会直接返回一个空的 jQuery 对象，return this。 jQuery( selector [, context ] ) ，这是一个标准且常用法，selector 表示一个 css 选择器，这个选择器通常是一个字符串，#id 或者 .class 等，context 表示选择范围，即限定作用，可为 DOM，jQuery 对象。 jQuery( element|elements ) ，用于将一个 DOM 对象或 DOM 数组封装成 jQuery 对象。 jQuery( jQuery object|object ) ，会把普通的对象或 jQuery 对象包装在 jQuery 对象中。 jQuery( html [, ownerDocument ] ) ，这个方法用于将 html 字符串先转成 DOM 对象后在生成 jQuery 对象。 jQuery( html, attributes ) ，和上一个方法一样，不过会将 attributes 中的方法和属性绑定到生成的 html DOM 中，比如 class 等。 jQuery( callback ) ，此方法接受一个回掉函数，相当于 window.onload 方法，只是相对于。

介绍完入口，就开始来看源码。

init: function (selector, context, root) { var match, elem; // 处理: $(""), $(null), $(undefined), $(false) if (!selector) { return this; } // rootjQuery = jQuery( document ); root = root || rootjQuery; // 处理 HTML 字符串情况，包括 $("<div>")、$("#id")、$(".class") if (typeof selector === "string") { //此部分拆分，留在后面讲 // HANDLE: $(DOMElement) } else if (selector.nodeType) { this[0] = selector; this.length = 1; return this; // HANDLE: $(function) } else if (jQuery.isFunction(selector)) { return root.ready !== undefined ? root.ready(selector) : // Execute immediately if ready is not present selector(jQuery); } return jQuery.makeArray(selector, this);}

上面有几点需要注意，root = root || rootjQuery; ，这个参数在前面介绍用法的时候，就没有提及，这个表示 document，默认的话是 rootjQuery，而 rootjQuery = jQuery( document ) 。

可以看出，对于处理 $(DOMElement) ，直接是把 jQuery 当作一个数组，this[0] = DOMElement 。其实，这要从 jQuery 的基本构造讲起，我们完成一个 $('div.span') 之后，然后一个 jQuery 对象（this），其中会得到一组（一个）DOM 对象，jQuery 会把这组 DOM 对象当作数组元素添加过来，并给一个 length。后面就像一些链式函数操作的时候，若只能对一个 DOM 操作，比如 width、height，就只对第一个元素操作，若可以对多个 DOM 操作，则会对所有 DOM 进行操作，比如 css()。

jQuery 大题思路如下，这是一个非常简单点实现：