思洋互动网站建设学前班

延续--迭代器（1）

在jQuery框架中，jQuery对象是一个很奇怪的概念，具有多重身份，所以很多初学者一听说jQuery对象就感觉很是不解，误以为它是John Resig制造的新概念。我们可以对jQuery对象进行如下分解。

第一，jQuery对象是一个数据集合，它不是一个个体对象。因此，你无法直接使用JavaScript的方法来操作它。

第二，jQuery对象实际上就是一个普通的对象，因为它是通过new运算符创建的一个新的实例对象。它可以继承原型方法或属性，同时也拥有Object类型的方法和属性。

第三，jQuery对象包含数组特性，因为它赋值了数组元素，以数组结构存储返回的数据。我们可以以JavaScript的概念理解jQuery对象，例如下面的示例。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <script language="javascript" type="text/javascript"> 
2. var jquery = {          //定义对象直接量  
3.     name : "jQuery",   //以属性方式存储信息  
4.     value : "1.3.2"  
5. };  
6. jquery[0] = "jQuery";   //以数组方式存储信息  
7. jquery[1] = "1.3.2";  
8. alert(jquery.name);   //返回"jQuery"  
9. alert(jquery[0]);       //返回"jQuery"  
10. </script> 

上面的jQuery对象就是一个典型的jQuery对象，jQuery对象的结构就是按这种形式设计的。可以说，jQuery对象就是对象和数组的混合体，但是它不拥有数组的方法，因为它的数组结构是人为附加的，也就是说它不是Array类型数据，而是Object类型数据。

第四，jQuery对象包含的数据都是DOM元素，是通过数组形式存储的，即通过jQuery[n]形式获取。同时jQuery对象又定义了几个模仿Array基本特性的属性，如length等。

所以，jQuery对象是不允许直接操作的，只有分别读取它包含的每一个DOM元素，才能够实现各种操作，如插入、删除、嵌套、赋值和读写DOM元素属性等。

那么如何实现直接操作jQuery对象中的DOM元素呢？

在实际应用中，我们可以看到类似下面的jQuery用法。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. $("div").html() 

也就是直接在jQuery对象上调用html()，并实现操作jQuery包含的所有DOM元素。那么这个功能是怎么实现的呢？

jQuery定义了一个工具函数each()，利用这个工具可以遍历jQuery对象中所有的DOM元素，并把需要操作的内容封装到一个回调函数中，然后通过在每个DOM元素上调用这个回调函数即可。实现代码如下所示，演示效果如图2.2所示。

1. <div></div> 
2. <div></div> 
3. <div></div> 
4. <script language="javascript" type="text/javascript"> 
5. var $ = jQuery = function(selector, context ){  
6.     return new jQuery.fn.init(selector, context );  
7. }  
8. jQueryjQuery.fn = jQuery.prototype ={  
9.     init : function(selector, context){  
10.         //省略的初始化构造器主体代码，请参阅上节示例  
11.     },  
12.     //定义jQuery对象方法  
13.     html : function(val){    //模仿jQuery框架中的html()方法，为匹配的每一个DOM元素插入html代码  
14.         jQuery.each(this, function(val){     //调用jQuery.each()工具函数，为每一个DOM元素执行回调函数  
15.             this.innerHTML = val;  
16.         }, val);  
17.     }  
18. }  
19. jQueryjQuery.fn.init.prototype = jQuery.fn;  
20. //扩展jQuery工具函数  
21. jQuery.each = function( object, callback, args ){  
22.     for(var i = 0; i<object.length; i++){  
23.         callback.call(object[i],args);  
24.     }  
25.     return object;  
26. }  
27. //示例测试  
28. $("div").html("测试代码");  
29. </script> 

在上面的示例中，通过先为自己的jQuery对象绑定html()方法，然后利用jQuery()选择器获取页面中所有的div元素，再调用html()方法，为所有匹配的元素插入HTML源码。

注意，在上面的代码中，each()函数的当前作用对象是jQuery对象，故this指向当前jQuery对象，即this表示一个集合对象；而在html()方法中，由于each()函数是在指定DOM元素上执行的，所以该函数内的this指针指向的是当前DOM元素对象，即this表示一个元素。

图2.2  模拟jQuery对象的html()方法