1       jQuery插件的类型

jQuery插件主要分为三种类型;

1.1     jQuery方法

这种类型的插件是把一些常用或重复使用的功能定义为函数，然后绑定到jQuery对象上，从而成为jQuery对象的一个扩展方法。

1.2     全局函数

也可以把自定义的功能函数独立附加到jQuery命名空间下，从而作为jquery作用域下的一个公共的函数使用。如，jquery的ajax()方法就是利用这种途径内部定义的全局函数。

  

   由于全局函数没有被绑定到jQuery对象上，故不能够在选择器获取的jQuery对象上调用。需要通过jQuery.fn()或者$.fn()方式进行引用。

 

1.3     选择器

自定义选择器。

 

2       解析jQuery插件机制

为了方便用户创建插件，jquery自定义了jQuery.extend()和jQuery.fn.extend()方法。

jQuery.extend()方法能够创建全局的函数或者选择器。

jQuery.fn.extend()方法能够创建jquery对象方法。

 

<script type="text/javascript">
     jQuery.extend({
       minValue:function(a,b){
         return a<b?a:b;
       },
       maxValue:function(a,b){
         return a<b?b:a;
       }
     });
    
     $(function(){
       $('input').click(function(){
var
var
var
var
         alert("你输入的最大值是:"+d+"\n你输入的最小值是："+c);
       });
     });

 

jQuery.extend()和jQuery.fn.extend()方法都包含一个参数，该参数仅接受名/值对结构的对象，其中名表示函数或方法名，而值表示函数体。

 

jQuery.extend()方法除了可以创建插件外，还可以用来扩展jQuery对象。如，调用jQuery.extend()方法把对象a和b合并为一个新的对象，并返回合并对象将其值赋给变量c。

在合并操作中，如果存在同名属性，则后面参数对象的属性值会覆盖前面参数对象的属性值。

var
zhu",
       pass:123
     }
var
wang",
       pass:456,
       age:1
     }
var
     $(function(){
var
div").html($("div").html()+"<br>"+name+":"+c[name]);
       }
     });

 

在实际开发中，常常使用jQuery.extend()方法为插件方法传递系列选项结构的参数。

function fn(options){
var
         name1:value1,
         name2:value2,
         name3:value3
       },options); //使用函数的参数覆盖或合并到默认参数选项列表中
     }
    
fn({name1:value2,name2:value3,name3:value1}); //覆盖新值
fn({name4:value4,name5:value5}); //添加新选项
fn(); //保持默认值

 

jQuery.extend()方法的对象合并机制，比传统的逐个检测参数不仅灵活且简洁，使用命名参数添加新选项也不会影响已编写的代码风格，让代码变得更加直观明白。

 

 

3       创建jQuery全局函数

就是jQuery对象的方法，实际上就是位于jQuery命名空间内部的函数。

这些函数有一个共同的特征，既是不直接操作DOM元素，而是操作javascript的非元素对象，或者执行其他非对象的特定操作，如jquery的each()函数和noConflict()函数。

 

Ajax()方法，它便是一个典型的jquery全局函数，$.ajax()所做的一切都可以通过调用名称ajax()的全局函数来实现。

 

使用jQuery.extend()方法可以扩展jQuery对象的全局函数。当然我们也可以使用下面的方法快速定义jQuery全局函数。

jQuery.minValue = function(a,b){
       return a<b?a:b;
     };
     jQuery.maxValue = function(a,b){
       return a<b?b:a;
     };

也既是说，如果要向jQuery命名空间上添加一个函数，只需要将这个新函数指定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为$。

 

考虑到jQuery插件越来越多，因此在使用时可能会遇到自己的插件名与第三方插件名发生冲突。为了避免这个问题，建议把自己的插件都封装在一个对象中。

jQuery.css8 = {
       minValue : function(a,b){
         return a<b?a:b;
       },
       maxValue : function(a,b){
         return a<b?b:a;
       }
     }
    
var
var

 

 

4       使用jQuery.fn对象创建 jquery对象方法

创建全局函数只需要通过为jQuery对象添加属性即可，而创建jQuery对象方法也可以通过为jQuery.fn对象添加属性来实现。实际上jQuery.fn对象就是jQuery.prototype原型对象的别名。

jQuery.fn.test = function(){
        alert("这是jQuery对象方法！");
     }
     $(function(){
       $("input").click(function(){
         $(this).test();
       });
     });

 

jQuery.fn.test = function(){
       return this.each(function(){
         alert(this.nodeName);
       });
     }
     $(function(){
       $("body *").click(function(){
html(this.nodeName).hide(4000); //连写
       });
     });

5       使用extend()方法创建jQuery对象方法

jQuery.extend()方法能够创建全局函数，而jQuery.fn.extend()方法可以创建jQuery对象方法。
jQuery.fn.extend({
         test : function(){
         return this.each(function(){
       alert(this.nodeName);
});
}
});

 

6       封装jQuery插件

封装jQuery插件的第一步是定义一个独立域，代码如下所示：
(function($){

  //自定义插件代码

})(jQuery);

 

确定创建插件类型，选择创建方式。

(function($){
   $.extend($.fn,{  //jquery对象方法扩展
 //函数列表})
})(jQuery);
 
(function($){
   $.extend($.fn,{  //jquery对象方法扩展
  color : function(options){           Var options =$.extend({
 bcolor:’white’,
 fcolor:’black’
 },options);           //函数体
}
})
})(jQuery);
 
 
(function($){
   $.extend($.fn,{  //jquery对象方法扩展
  color : function(options){           Var options =$.extend({
 bcolor:’white’,
 fcolor:’black’
 },options);           return this.each(function(){
 $(this).css(‘color’,options.fcolor);
 $(this).css(‘backgroundColor’,options.bcolor);
 });}
})
})(jQuery);
 
 
$(function(){
 $(“h1”).color({    Bcolor:’#eea’,
   fcolor:’red’});
})

7       优化jQuery插件—开放公共参数

续上面的代码为例进行说明，把其中的参数默认值作为$.fn.color对象的属性单独进行设计，然后借助jQuery.extend()方法覆盖原来参数选项即可。

 

(function($){
fn,{
         color:function(options){
var
         return this.each(function(){
css("color",options.fcolor);
css("backgroundColor",options.bcolor);
         });
         }
       })
       $.fn.color.defaults = { //独立设置$.fn.color对象的默认参数值
bcolor:"white",
fcolor:"red"
       }
     })(jQuery);
     
     $(function(){
       $.fn.color.defaults = {
bcolor:"#eea",
fcolor:"black"
       }
       $("h1").color();
bcolor:"#fff"});
div").color();
     });

 

8       优化jQuery插件—开发部分功能

继续以上一节的示例为基础，为其添加一个格式化的扩展功能，这样用户在设置颜色的同时，还可以根据需要适当进行格式化功能设计，如加粗、斜体、放大等功能操作。

(function($){
fn,{
         color:function(options){
var
         return this.each(function(){
css("color",options.fcolor);
css("backgroundColor",options.bcolor);
var _html = $(this).html();
             _html = $.fn.color.format(_html);
html(_html);
         });
         }
       })
       $.fn.color.defaults = { //独立设置$.fn.color对象的默认参数值
bcolor:"white",
fcolor:"red"
       }
str){
str;
       }
     })(jQuery);
     
     $(function(){
       $.fn.color.defaults = {
bcolor:"#eea",
fcolor:"black"
       }
str){
str+"</strong>";
       }
       $("h1").color();
bcolor:"#fff"});
str){
str+"</span>";
       }
div").color();
     });

 

 

9       优化jQuery插件—保留插件隐私

若插件包含很多函数，在设计时我们希望这么多函数不搅乱命名空间，也不会被完全暴露，惟一的方法就是使用闭包。为了创建闭包，可以将整个插件封装在一个函数中。

继续以上一个为例，为了验证用户在调用color()方法时所传递的参数是否合法，我们不妨在插件中定义一个参数验证函数，但是该验证函数是不允许外界侵入或者访问的，此时我们可以借助闭包把它隐藏起来，只允许在插件内部进行访问。

 

(function($){
fn,{
         color:function(options){
            if(!filter(options)){
               return this;
            }
var
         return this.each(function(){
css("color",options.fcolor);
css("backgroundColor",options.bcolor);
var _html = $(this).html();
             _html = $.fn.color.format(_html);
html(_html);
         });
         }
       })
       $.fn.color.defaults = { //独立设置$.fn.color对象的默认参数值
bcolor:"white",
fcolor:"red"
       }
str){
str;
       }
       function filter(options){//定义隐藏函数，外界无法访问
typeof
       }
     })(jQuery);
     
     $(function(){
        //以下访问非法
ffffff");
     });