jQuery源码分析之实例调用方法map,slice,first,last,end,sort,splice,push方法详解

  jQuery源码中的pushStack函数源码

pushStack: function( elems ) {
		// Build a new jQuery matched element set
		var ret = jQuery.merge( this.constructor(), elems );
		// Add the old object onto the stack (as a reference)
		ret.prevObject = this;
		ret.context = this.context;
		// Return the newly-formed element set
		return ret;
	}

pushStack测试用例：

var result=$("#content1").pushStack($("#content2")).prevObject;
console.log(result);//其实结果就是$("#content1")的结果对象!

note:pushStack返回的是入栈的对象，也就是刚入栈的元素，入栈的元素是elems首先通过merge方法全部添加到一个空的jQuery对象上，于是该jQuery对象就变成一个封装了elems所有的元素的对象，最后把这个对象返回!如果要获取到调用对象的元素可以调用pushStack后然后调用prevObject属性!

现在你能看懂jQuery实例的map函数了把：源代码如下：

map: function( callback ) {
//pushStack参数是一个数组，是对this中的每一个元素调用callback后得到的结果!
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );//注意：map必须要显示return才会放在结果集中间!
}));
}

注意:实例map方法中传入的回调函数第一个参数是下标，第二个元素是DOM元素,他把jQuery.map回调函数的结果进行入栈操作，最后把入栈的结果返回：

var result=$("div").map(function(i,elem)
{
	if(elem.id==="content1")
		{
			return elem;
		}
});
alert(result.id);//返回的jQuery对象，不是DOM,无法直接获取id。同时返回的对象的length是1，因为只有content1的元素有显示的return!

note:(1)对每一个DOM对象都调用这个匿名函数,这里匿名函数里面第一个参数是下标，第二个参数是元素!  (2)map方法返回的是jQuery对象 ,也就是调用each方法的对象! 
对于实例方法each来说，底层调用了jQuery.each，所以回调函数中第一个参数是下标，第二个参数也是DOM元素：

var result=$("div").each(function(i,elem)
{
	if(elem.id==="content1")
		{
			return elem;
		}
});
alert(result.attr("id"));
//each方法返回的还是jQuery对象，不能通过id直接获取!因为jQuery.each方法返回值就是调用对象，也就是返回$("div")。直接获取只会返回第一个对象的id值!

note:jQuery.each返回的还是调用对象，所以，相比于上面的实例map而言，这里的最后的result结果保存的就是$("div")!

下面是jQuery实例调用方法slice源码（记住slice方法断尾）：

var deletedIds = [];
var slice = deletedIds.slice;
slice: function() {
//这里调用了数组的slice方法，把传入slice的参数变成Array类型，返回值为jQuery对象，通过prevObject可以获取选择器返回的对象
return this.pushStack( slice.apply( this, arguments ) );
}

给一个例子：

<p id="first">This is a paragraph.</p>
<p id="sec">This is a paragraph.</p>

JS部分：

//打印true
alert($("p").slice(0, 2) instanceof jQuery);
//打印first sec。所以slice返回的ret对象用prevObject保存了上一次选择的结果$("p")
alert($("p").slice(0, 2).prevObject[0].id+$("p").slice(0, 2).prevObject[1].id);

下面是jQuery实例调用方法end源码：

end: function() {
return this.prevObject || this.constructor(null);
}
//到这里你肯定明白了为什么要用prevObject保存上一次选择的结果，就是为了end方法来准备的!
//alert($("p").constructor(null) instanceof jQuery);返回true，也就是this.constructor(null)返回一个空jQuery对象。如果已经没有preObject那么就返回空的jQuery对象!

总结：

(1)实例map方法底层通过jQuery.map对数据进行筛选，所以他返回的对象可能和调用对象不一样。但是实例each方法底层调用了jQuery.each方法，目的就是为了让所有的调用者执行某一个回调，而且返回值就是调用对象，因此他的作用在于遍历数据而不是修改数据!

(2)可以用实例slice方法获取jQuery对象特定区域之间的DOM元素!

下面我来测试一些jQuery可能很少用的方法：sort方法

function sortAlpha(a,b){
    return a.id.toLowerCase()>b.id.toLowerCase() ? 1 : -1;
};
 //打印原始顺序[div#content55, div#content23, div#content12, div#content44]
console.log($("div"));
//如果前面的id的值较大，那么返回1，表示较大的应该排列在后面,所以是升序排列!
var result=$("div").sort(sortAlpha);
//通过字符串排序，排序结果按照id的升序排列!
//打印[div#content12, div#content23, div#content44, div#content55]
console.log(result);

note:如果这些元素本来就在DOM树上面，那么通过appendTo添加到页面上不会有任何效果。同时sort方法接受的函数有两个参数，如果第一个参数应该位于第二个之前那么应该返回负数。

splice方法：

var result=$("div");
//打印[div#content55, div#content23]
console.log(result);
//添加项目
result.splice(0,0,$("#span1")[0]);
//打印[span#span1, div#content55, div#content23]
//也就是在第0个元素之前添加span元素，修改了原来的数据result!
console.log(result);
//删除前两项
result.splice(0,2);
//打印[div#content23]
console.log(result);
//把最后一个元素用所有的div元素去替换
result.splice(0,1,$("div")[0],$("div")[1]);
//打印[div#content55, div#content23]
//记住：这里添加的必须是DOM元素不能是jQuery对象!
console.log(result);

note:1表示替换，0表示插入，两个参数表示删除指定的项数!同时splice方法插入的必须是DOM元素， 不能是jQuery元素，否则达不到指定的效果!
jQuery元素的push方法：

var result=$("div");
//打印[div#content55, div#content23]
console.log(result);
//为result添加元素
result.push($("#span1")[0]);
//打印[div#content55, div#content23, span#span1]
console.log(result);

note:jQuery的push方法，splice方法，sort方法其实都是数组的方法！