第一步是選擇器做的事;
第二步將HTMLCollection/NodeList轉成數組以前討論過;
第三步又將數組轉成偽數組/ArrayLike(jQuery對象),只需調用下數組的push即可。
也許下面的例子容易理解
代碼如下:
var jqObj = {0:'one',1:'two',2:'three',length:3}, // 偽數組(ArrayLike)
ary = ['one','two','three']; //數組
// 將偽數組(ArrayLike)轉成數組
function jqObjToArray(json){
var slice = Array.prototype.slice;
return slice.call(json,0);
}
// 將數組轉成偽數組(ArrayLike)
function ArrayToJqObj(ary){
var obj = {}, push = Array.prototype.push;
push.apply(obj,ary);
return obj;
}
console.log(jqObjToArray(jqObj));
console.log(ArrayToJqObj(ary));
jQuery還提供了first/last/eq/slice方法,它們與上面提到的get/toArray不同。它們返回的是jQuery對象而非返回HTMLElement。如下html片段
代碼如下:
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
$('div').first() 返回jq對象集合的第一個元素, 即Div[id=a],結構:{0:div,length:1,...};//...表示省略了其它屬性
$('div').last() 返回jq對象集合的最後的元素, 即Div[id=d],結構:{0:div,length:1,...};
$('div').eq(2) 返回jq對象匹配的第三個元素, 即Div[id=c],結構:{0:div,length:1,...};
查看源碼得知:
1,first,last方法中直接調用了eq方法。
2,eq方法中調用了slice方法。
因此slice方法才是根本。該方法讓我們自然想到數組的slice方法,實際上jQuery正是利用Array的push和slice方法。
1,利用Array.prototype.slice方法將 偽數組 轉成 數組
2,利用Array.prototype.push方法將 數組 轉成 偽數組
當然jQuery中的slice方法調用了pushStack。我這裡簡寫了slice,如下
代碼如下:
slice : function(){
var ret = $();//關鍵的一句,構造一個新的jq對象,
var ary = slice.apply(this,arguments);//這裡的this是jq對象,根據參數轉成數組子集
push.apply(ret,ary);//轉成jq對象,即偽數組形式
return ret;
},
相關:
將HTMLCollection/NodeList/偽數組轉換成數組
zChain-05.rar