读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 9

get:  function ( num ) {      return  num ==  null  ?            // Return a 'clean' array          this .toArray() :            // Return just the object          ( num < 0 ?  this [  this .length + num ] :  this [ num ] ); },

get内就一个三元运算符，即两个分支。

分支1，当不传参数时将获取全部DOM元素（调用toArray）
分支2，当num为数字（索引）时返回指定的某一个DOM元素（数字为负数时为逆向获取）


分支1实际是将jQuery对象（伪数组）转成真正的数组，分支2实际是（用中括号[]）取“伪数组”元素。下面以$('div')来描述整个调用过程

1. 获取页面div元素（document.getElementsByTagName('div')）
2. 将集合HTMLCollection/NodeList转成真正的数组
3. 将数组转成伪数组/ArrayLike（jQuery对象）

如图

 

第一步是选择器Sizzle作的事
第二步将HTMLCollection/NodeList转成数组之前讨论过
第三步又将数组转成伪数组/ArrayLike（jQuery对象），只需调用下数组的push便可

 

也许下面的例子容易理解

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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片断

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 6

slice :  function (){      var  ret = $(); //关键的一句,构造一个新的jq对象，      var  ary = slice.apply( this ,arguments); //这里的this是jq对象，根据参数转成数组子集      push.apply(ret,ary); //转成jq对象，即伪数组形式      return  ret; },