jQuery插件开发的两种方法及$.fn.extend的详解

本贴纯属借鉴大神之作，请各位勿喷，嘿嘿

jQuery开发分为两种：1、类级别，2、对象级别

一、类级别
       类级别你可以理解为扩展的jQuery类，最明显是$.ajax(...)，相当于静态方法。开发其扩展方法时使用$.extend()方法，即jQuery.extend(object);

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

页面中调用代码如下：

var a = $.add(2,1);
var m = $.minus(2,1);

二、对象级别
       对象级别则可以理解为基于对象的扩展，如$("#table").changeColor(...)，这里的changeColor就是基于对象的扩展，也就是自己给$("#table")写的一个方法。开发其扩展方法时使用$.fn.extend(...),即jQuery.fn.extend(object);

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

页面调用代码如下：

$("#div1").add(2,1);
$("#div2").minus(2,1);

稍微扩展一下再写另一个例子便于咱们学习理解：

$.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(); 

如果到这里大家还不是很理解$.extend()和$.fn.extend()的话，下面会再直白的解释一下。

       $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。如扩展$.fn.abc()那么你可以这样子调用：$("#div").abc();
另外$.fx是指jquery的特效。如果使用显示、滑动、淡入淡出、动画等。$.fx.off可以关闭动画，其实是直接显示结果。
       原来 jQuery.fn = jQuery.prototype.，对prototype相信咱们已经可以很好的理解啦。
       虽然 javascript没有明确的类的概念，但是用类来理解它，会更方便。 jQuery便是一个封装得非常好的类，比如我们用语句$("#btn1")会生成一个 jQuery类的实例。
       jQuery.extend(object)为jQuery类添加添加类方法，可以理解为添加静态方法。如： $.extend({ add:function(a,b){return a+b;} }); 便为　jQuery　添加一个为 add的“静态方法”，之后便可以在引入 jQuery的地方，使用这个方法了，$.add(3,4); //return 7 jQuery.fn.extend(object)对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。 比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。

      alertWhileClick:function() { 
        $(this).click(function(){
          alert($(this).val()); 
        }); 
   } }); 
  $("#input1").alertWhileClick(); 

页面上为： $("#input1")　为一个jQuery实例，当它调用成员方法alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。