viajQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend();

jQuery.extend();

jQuery.fn

jQuery.fn = jQuery.prototype = {　　　init: function( selector, context ) {//….//……};

 

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

虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。

jQuery便是一个封装得非常好的类，比如我们用 语句　$(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object)

为jQuery类添加类方法，可以理解为添加静态方法。需要通过jquery.方法名字来调用-如：

jQuery.extend({min: function(a, b) { return a < b ? a : b; },max: function(a, b) { return a > b ? a : b; }});jQuery.min(2,3); //  2 jQuery.max(4,5); //  5

 

jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，这 是很重要的，在jQuery.JS中到处体现这一点原文来自：http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的 prototype里去，这样的话就是插件机制了。

;(function($){            $.fn.tab=function(options){                var defaults={                    //各种参数，各种属性                    currentClass:'current',                    tabNav:'.tabNav>li',                    tabContent:'.tabContent>div',                    eventType:'click'                }                var options=$.extend(defaults,options);                this.each(function(){                    //实现功能的代码                    var _this=$(this);                    _this.find(options.tabNav).bind(options.eventType,function(){                                           $(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);                    var index = $(this).index();                    _this.find(options.tabContent).eq(index).show().siblings().hide();                                            });                });                return this;             }        })(jQuery)

 

　以上是一个模块插件的写法。在html页面调用方法如下：

  

$(function(){              $(".tab").tab({                eventType:"mouseover"              }).find(".tabContent>div").css({color:"red"});      })

可以给然后dom或者控件直接调用插件的方法。如果 obj.插件的方法名字；

 

附上完整的html代码demo如下：

                              
     
           
      
           
       
html
           
       
css
           
       
javascript
      
      
          
      
            
       
        html
       
            
       
        css
       
            
       
         javascript