jQuery分析（取DOM元素）使⽤过Prototype.js的同学知道$(xx)调⽤后返回的是HTMLElement或其集合。
jQuery的$调⽤后想要获取DOM元素可以使⽤get⽅法，如下
1 2// ⽅式1
$('div').get(1); // 获取页⾯中第⼆个div
当然，也可以使⽤数组索引⽅式获取
1 2// ⽅式2
$('div')[1]; // 获取页⾯中第⼆个div
上⾯两种⽅式都可以获取某⼀个特定的DOM元素，⽽获取DOM元素集合却要使⽤toArray⽅法1$('div').toArray(); // 返回页⾯中所有的div，依次放⼊数组中
看看get⽅法的源码
1 2 3 4 5 6 7 8 9get: function( num ) {
return num == null?
// Return a 'clean' array
// Return just the object
( num < 0 ? this[ this.length + num ] : this[ num ] ); },
get内就⼀个三元运算符，即两个分⽀。
分⽀1，当不传参数时将获取所有DOM元素（调⽤toArray）
jquery在一个元素后追加标签分⽀2，当num为数字（索引）时返回指定的某⼀个DOM元素（数字为负数时为逆向获取）
分⽀1实际是将jQuery对象（伪数组）转成真正的数组，分⽀2实际是（⽤中括号[]）取“伪数组”元素。下⾯以$('div')来描述整个调⽤过程
1. 获取页⾯div元素（ElementsByTagName('div')）
2. 将集合HTMLCollection/NodeList转成真正的数组
3. 将数组转成伪数组/ArrayLike（jQuery对象）
如图
第⼀步是选择器做的事
第⼆步将HTMLCollection/NodeList转成数组以前
第三步⼜将数组转成伪数组/ArrayLike（jQuery对象），只需调⽤下数组的push即可也许下⾯的例⼦容易理解
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16var 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⽚段
1 2 3 4<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，如下
1 2 3 4 5 6slice : function(){
var ret = $();//关键的⼀句，构造⼀个新的jq对象，
var ary = slice.apply(this,arguments);//这⾥的this是jq对象，根据参数转成数组⼦集        push.apply(ret,ary);//转成jq对象，即伪数组形式
return ret;
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。