jQuery.extend()、jQuery.fn.extend()扩展方法详解

jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法.
例如:

[javascript]  view plain copy print ?

1. jQuery.extend({  
2.     showName : function(name){  
3.         alert(name)  
4.     }  
5. });  
6. jQuery.showName("深蓝");  

jQuery.extend()除了可以创建插件外,还可以用来扩展jQuery对象.
例如:

[javascript]  view plain copy print ?

1. var a = {  
2.     name : "blue",  
3.     pass : 123  
4. }  
5. var b = {  
6.     name : "red",  
7.     pass : 456,  
8.     age : 1  
9. }  
10. var c = jQuery.extend({},a,b);  

c拥有a,b对象的属性,由于,b对象在a对象之后,其name属性优先在c对象里.

jQuery.extend()方法为插件传递系列选项,包括默认值.

[javascript]  view plain copy print ?

1. function fn(options){  
2.     var options = jQuery.extend({    //默认参数选项列表  
3.         name1 : value1,  
4.         name2 : value2,  
5.         name3 : value3  
6.     },options);   //使用函数的参数覆盖或合并到默认参数选项列表中  
7.     //函数体  
8. }  
9. fn({ name1 : value3, name2 : value2 , name3 : value1 });//使用新值  
10. fn({ name4 : value3, name5 : value2 });//在默认上添加新选项  
11. fn();    //保持默认选项值  

当在调用该方法时,传递新的参数值,就会覆盖掉默认的参数选项值,否则,使用默认参数值.

使用JQuery.fn对象创建JQuery对象方法

可以通过jQuery.fn对象来添加属性和方法,实际上jQuery.fn对象就是挂接在jQuery.prototype上的,jQuery把它简写了.

fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {

　　　init: function( selector, context ) {//....　

　　　//......

};

 

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

例如:

[javascript]  view plain copy print ?

1. jQuery.fn.test = function(){  
2.     alert("这是jQuery对象方法!");  
3. }  
4. jQuery("div").click(function(){  
5.     $(this).test();   //在当前的jQuery对象上调用test()方法  
6. });  

我们可以调用jQuery.fn.extend()方法来创建jQuery对象方法.

[javascript]  view plain copy print ?

1. jQuery.fn.extend({  
2.     test : function(){  
3.         return this.each(function(){  
4.             alert(this.nodeName)  
5.         });  
6.     }  
7. });  
8. jQuery("body *").click(function(){  
9.     $(this).test();     //调用jQuery对象方法  
10. });  

一句话:jQuery.extend是对JQuery类的自定义扩展,jQuery.fn.extend是对JQuery对象的自定义扩展.