jquery-2.1.4 源码解读(3):jQuery.prototype 解读

源码92-175行定义了jQuery.prototype,下面逐个方法进行解读:
1. toArray()方法 104-107
该方法将jQuery对象转化为原生domElement数组,核心代码为slice.call(this),对slice方法有疑问的可以参考文章“”
2. get(num)方法 110-118
该方法返回num指定的jQuery对象中的第num个原生element,如果num不指定则返回原生element数组。
3. pushStack(elems) 122-129
此方法用于创建由jQuery对象组成的栈结构,栈中的jQuery对象通过preObject引用它的上一个jQuery对象,此方法经常被用来调用以生成jQuery对象
参数elems代表jQuery对象或由原生domElement组成的数组,具体代码如下:

function( elems ) {
// 创建一个干净的jQueyr对象,并将jQuery对象中的原生dom或原生dom数组合并到该jQuery对象中
var ret = jQuery.merge( this.constructor(), elems );
// 将合并后的jQuery对象的prevObject指向调用该方法的jQuery对象
ret.prevObject = this;
ret.context = this.context;
return ret;
}

此处干净的jQuery对象指的是jQuery对象的length属性值为0,不包含原生dom元素。
4. each(callback, args) 138-140
此方法调用了构造jQuery的静态each方法,遍历jQuery对象,对jQuery对象中引用的每个原生dom元素调用callback,核心代码为callback.call(jQueryObj[i],arguments)
5. map(callback) 142-146
此方法将jQuery对象中引用的原生dom元素用callback进行处理,然后将处理后的原生dom元素又封装成为jQuery对象。
具体而言此方法将jQuery对象中按下标引用的对象(即jQueryObj[i])进行循环,在循环中将jQueryObj[i]作为参数传递给callback执行,callback执行后返回的结果保存为数组元素,
循环结束后返回一个数组,之前的处理是通过调用jQuery的静态map方法来实现的,最后将静态map方法返回的数组作为参数传递给原型pushStack方法,即将数组封装为jQuery对象。
6. slice(start,end) 148-150
此方法类似于Array.prototype.slice()方法, 可将jQuery对象进行截取,如原来jQueryObj.length = 5,调用jQueryObj.slice(0,3),则会截取jQueryObj的前三个下标引用元素,即jQueryObj[0],jQueryObj[1],jQueryObj[2],然后这三个元素重新封装为新的jQuery对象。
7. first() 152-154
此方法返回jQuery对象下标0引用的对象,即jQuery[0]
8. last() 56-158
返回jQuery对象最后一个下标引用的对象,即jQuery[jQuery.length-1]

9. eq(i) 160-164

返回jQuery对象下标i引用的对象的封装jQuery对象
10. end() 166-168
如果jQuery对象的prevObject属性指向不为空,则将prevObject指向的jQuery对象返回,否则返回一个干净的jQuery对象。
由pushStack创建的jQuery对象都会有prevObject指向它的前一个jQuery对象,end()方法用于返回上一个jQuery对象的引用,如下面代码所示:
$("p").find("span").css("color","red").end().css("border", "2px red solid");
在对span改变颜色后,又会改变p的边框样式,...css("color","red")调用后返回的是span对应的jQuery对象,调用该对象的end()方法后就返回了创建该span对象的p对应的jQuery对象。


posted @ 2015-12-09 19:43  比昂  阅读(224)  评论(0编辑  收藏  举报