jQuery插件开发及jQuery.extend函数详解和jQuery.fn与jQuery.prototype区别

标签：jquery插件   jqery.extend   jquery.prototype   jquery.extend   jquery.fn   

开发扩展其方法时使用$.extend方法，即jQuery.extend(object); 

$.extend({ 
    add:function(a,b){return a+b;} , 
    minus:function(a,b){return a-b;} 
}); 

var i = $.add(3,2); 
var j = $.minus(3,2); 

2.对象级别：
对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。 
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object); 

$.fn.extend({ 
    check:function(){ 
        return this.each({ 
            this.checked=true; 
        }); 
    }, 
    uncheck:function(){ 
        return this.each({ 
            this.checked=false; 
        }); 
    }
});

$(‘input[type=checkbox]‘).check(); 
$(‘input[type=checkbox]‘).uncheck(); 

3.扩展

$.xy = {
    add:function(a,b){return a+b;} ,
    minus:function(a,b){return a-b;},
    voidMethod:function(){ alert("void"); }
};
var i = $.xy.add(3,2); 
var m = $.xy.minus(3,2); 
$.xy.voidMethod(); 

二、jQuery.extend 函数详解：

1.jQuery的扩展原型是：
jQuery.extend(target, object1,object2,.. objectN)；
它的含义是将object1,object2,...objectN合并到target中，返回值为合并后的target，由此可以看出该方法合并后，
是修改了target的结构的。如果想要得到合并的结果却又不想修改target的结构，可以如下使用：
var newObj= $.extend({},obj1,obj2,obj3...);//也就是将"{}"作为target参数。
如下例：
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})；
那么合并后的结果：
result={name:"Jerry",age:21,sex:"Boy"}
也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。
2.jQuery的另一个扩展原型是，省略target参数：
$.extend(object);
上述的extend方法原型中的target参数是可以省略的，如果省略了，则该方法就只能有一个object参数，而且是将该object合并到调用extend方法的对象中去，如：
2.1 $.extend(object),该方法就将object合并到jQuery的全局对象中去，举例如下：
$.extend({
    hello:function(){alert(‘hello‘);}
});
使用方式：$.hello();
这里就将hello()方法合并到jQuery的全局对象中去，相当于jQuery的静态方法；
2.2 $.fn.extend(object),该方法将object合并到jQuery的实例对象中去，举例如下：
$.fn.extend({
hello:function(){alert(‘hello‘);}
});
使用方式：$("#test").hello();
2.3常用扩展实例：
$.extend({
    home:{}
});
这是在jQuery全局对象中扩展一个home命名空间。
$.extend($.home,{
    getAddress:function(){alert(‘广东省广州市海珠区‘);}
});
这是将hello方法扩展到之前扩展的jQuery的home命名空间中去。
3.jQuery的extend方法还有一个重载原型：
$.extend(boolean,target,obj1,obj2,obj3,...);
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
var result = $.extend(true,{},
    {name:"John",location:{city:"Boston",country:"USA"}},
    {sex:"male",location:{province"GuangDong",country:"China"}}
);
则合并后的结果为：
result = {name:"John",sex:"male",location:{city:"Boston",province:"GuangDong",country:"China"}};
也就是说它会将object中的嵌套子对象也会进行合并，而如果第一个参数boolean为false，则合并后的结果为：
result = {name:"John",sex:"male",location:{province"GuangDong",country:"China"}};

<span style="font-family:Microsoft YaHei;font-size:14px;">(function( window, undefined ) {
   
    var jQuery = (function() {
       // 构建jQuery对象
       var jQuery = function( selector, context ) {
           return new jQuery.fn.init( selector, context, rootjQuery );
       }
   
       // jQuery对象原型
       jQuery.fn = jQuery.prototype = {
           constructor: jQuery,
           init: function( selector, context, rootjQuery ) {
              // something to do
           }
       };
   
       // Give the init function the jQuery prototype for later instantiation
       jQuery.fn.init.prototype = jQuery.fn;
   
       // 合并内容到第一个参数中，后续大部分功能都通过该函数扩展
       // 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数
       jQuery.extend = jQuery.fn.extend = function() {};
      
       // 在jQuery上扩展静态方法
       jQuery.extend({
           // something to do
       });
 
        // 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展
       return jQuery;
   
    })();
   
    window.jQuery = window.$ = jQuery;
})(window);</span>

var jQuery = function( selector, context ) {
           return new jQuery.fn.init( selector, context, rootjQuery );
       }

jQuery.fn = jQuery.prototype = {
           constructor: jQuery,
           init: function( selector, context, rootjQuery ) {
              // something to do
           }
       };

jQuery.fn = jQuery.prototype

jQuery.fn.init.prototype = jQuery.fn;

jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype

补充知识：

js函数前面的加号，叹号,如：+function(){}();

这里的加号，也可以替换成!,~等其他一元操作符，其效果相当于：

(function() { console.log("Foo!"); })();
// or
(function() { console.log("Foo!"); }());

如果没有这个加号的话，解析器会认为function是一个函数声明的开始，函数声明前置处理后，后面则剩一个（）将会导致语法错误。在function前面加上+号时，就变成了一个函数表达式，函数表达式不会进行前置处理，则其后面又添加了一个()就变成了一个立即执行的函数了。

jQuery插件开发及jQuery.extend函数详解和jQuery.fn与jQuery.prototype区别

标签：jquery插件   jqery.extend   jquery.prototype   jquery.extend   jquery.fn   

原文地址：http://blog.csdn.net/sunlovefly2012/article/details/46305389