读jquery之五(取DOM元素)

2014-11-24 01:08:50 · 作者: · 浏览: 0

使用过Prototype.js的同学知道$(xx)调用后返回的是HTMLElement或其集合。

jQuery的$调用后想要获取DOM元素可以使用get方法,如下

view sourceprint
1 // 方式1

2 $(div).get(1); // 获取页面中第二个div

当然,也可以使用数组索引方式获取

view sourceprint 1 // 方式2

2 $(div)[1]; // 获取页面中第二个div

上面两种方式都可以获取某一个特定的DOM元素,而获取DOM元素集合却要使用toArray方法

view sourceprint 1 $(div).toArray(); // 返回页面中所有的div,依次放入数组中

看看get方法的源码

view sourceprint 1 get: function( num ) {

2 return num == null

3

4 // Return a clean array

5 this.toArray() :

6

7 // Return just the object

8 ( num < 0 this[ this.length + num ] : this[ num ] );

9 },

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

分支1,当不传参数时将获取所有DOM元素(调用toArray)
分支2,当num为数字(索引)时返回指定的某一个DOM元素(数字为负数时为逆向获取)


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

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


如图

第一步是选择器做的事;
第二步将HTMLCollection/NodeList转成数组以前讨论过;
第三步又将数组转成伪数组/ArrayLike(jQuery对象),只需调用下数组的push即可。

也许下面的例子容易理解

view sourceprint 01 var jqObj = {0:one,1:two,2:three,length:3}, // 伪数组(ArrayLike)

02 ary = [one,two,three]; //数组

03

04 // 将伪数组(ArrayLike)转成数组

05 function jqObjToArray(json){

06 var slice = Array.prototype.slice;

07 return slice.call(json,0);

08 }

09 // 将数组转成伪数组(ArrayLike)

10 function ArrayToJqObj(ary){

11 var obj = {}, push = Array.prototype.push;

12 push.apply(obj,ary);

13 return obj;

14 }

15 console.log(jqObjToArray(jqObj));

16 console.log(ArrayToJqObj(ary));

jQuery还提供了first/last/eq/slice方法,它们与上面提到的get/toArray不同。它们返回的是jQuery对象而非返回HTMLElement。如下html片段

view sourceprint 1

A

2

B

3

C

4

D

$(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,如下

view sourceprint 1 slice : function(){

2 var ret = $();//关键的一句,构造一个新的jq对象,

3 var ary = slice.apply(this,arguments);//这里的this是jq对象,根据参数转成数组子集

4 push.apply(ret,ary);//转成jq对象,即伪数组形式

5 return ret;

6 },