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集合。