Jquery源码分析,二

类型

说明

Dom Element

第一个参数为Dom元素,第二个参数不用。直接把Dom元素存在新生成的jQuery对象的集合中。返回这个jQuery对象。构建jQuery对象完成。

string

第一个参数为string有三种情况:

1、html的标签字符串,$(html) -> $(array),第二个参数可选。

执行selector = jQuery.clean([match[1]], context);。该语句是把hteml的字符串转换成dom对象的数组。接着执行Array类型的返回。

2、字符串为#id时$(id)

首先通过var elem = document.getElementById(match[3]);取得elem,如没有取到selector = [];转到执行Array类型的返回空集合jquery对象。

如找到elem,通过return jQuery(elem);再次生成jquery对象,这次是

Dom Element类型的jquery对象的返回。

3、兼容css1-3语法的selector字符串,第二个参数是可选的。

执行return jQuery(context).find(selector);。该语句先执行jQuery(context)。可以看出context第二参数可以是任意的值,可以是集合形式。之后就通过find(selector)找到jQuery(context)中所有dom元素都满足selector表达式的dom元素的集合,构建新的jquery对象,并返回。

#id其实和这种方式是统一的,单独出来是为了提高性能。

Fn

第一参数是函数。第二个参数不用。是$(document).ready(fn)的的简写,其return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector)是其执行的代码。这个语句首先执行jQuery(document),它再一次newjQuery.fn.init函数,生成jQuery对象(元素为document)。再调用这个对象的ready(fn)方法。Ready(fn)返回当前对象。而上面的语句又是返回这个Ready(fn)的返回对象。

可见这个$(fn)返回是$(document)的对象。抛弃了第一次生成的$(fn)对象。

Array

第一参数是除上面提到Dom元素,函数,string所有其它的类型。可以为空如$()。第二个参数不用。

语句:return this.setArray(jQuery.makeArray(selector));

它首先是把第一个参数转换数组。Selector可以是Array-like的集合,如jQuery对象,如getElementsByTag返回的Dom元素集合等,可能支持$(this)。Selector还可能是单个任意的对象。

转换成标准的数组之后,执行 this.setArray把这个数组中的元素全部存到当前jquery对象的集合中。之后返回当前的jquery对象。

其实Dom Element完全可能综合在这里面,单独拿起来为了提高性能。

从上面的代码和上表中,我们可以看出构建jquery对象就是往jquery对象的集合中添加元素(一般都应该是dom元素)。添加的元素有两种形式,一是单个元素,可能通过直接的dom元素的传参,还可以通过#id从dom文档中找元素。二是集合,如jquery对象,还有数组,还有通过CSS Selector找到的Dom集合。