jQuery 插件开发入门

jQuery插件开发包括三种：

1. 封装对象方法的插件

　　这种插件将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件，有两种形式可实现：

形式1：

(function(){
    $.fn.extend({
     pluginName:function(options,callback){
}
});
})(jQuery);

形式2：

(function($){
    $.fn.pluginName  = function(){
   //   plugin implement code 
}
})(jQuery);

附注：1. 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不是Dom元素。

　　　2. 可以通过this.each遍历所有jQuery对象集合中的DOM元素。

　　　3. 插件应该返回一个jQuery对象，以保证插件的可链式操作，除非插件要返回一些要获取的量。

例如：编写一个改变DOM元素文本颜色的插件color();

(function(){
    $.fn.extend({
    "color":function(value){
    if(value==undefined){
    return this.css("color");
}else{
    return this.css("color",value);
}
}
});
})(jQuery);

2. 封装全局函数的插件：

　　此插件将独立的函数添加到jQuery的命名空间下，如jQuery.ajax(), jQuery.extend(),jQuery.each()等...

　　添加全局函数有三种方式：

　　形式1：直接在jQuery对象下扩展

jQuery.foo = function() {    
alert('This is a test. This is only a test.');   
};   
jQuery.bar = function(param) {    
alert('This function takes a parameter, which is "' + param + '".');   
};    
调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

      形式2：使用extend函数扩展jQuery方法

jQuery.extend({       
foo: function() {       
alert('This is a test. This is only a test.');       
},       
bar: function(param) {       
alert('This function takes a parameter, which is "' + param +'".');       
}      
});  

　　形式3：在命名空间下扩展方法

jQuery.myPlugin = {           
foo:function() {           
alert('This is a test. This is only a test.');           
},           
bar:function(param) {           
alert('This function takes a parameter, which is "' + param + '".');     
}          
};   
采用命名空间的函数仍然是全局函数，调用时采用的方法：   
$.myPlugin.foo();          
$.myPlugin.bar('baz');  

例如实现一个去掉字符串左右空格的插件：

(function(){
    $.extend({
    ltrim: function(str){
    return (str || "").replace(/^\s+/g,"");
},
    rtrim:function(str){
    return (str || "").replace(/\s+$/g,"");
}
});
})(jQuery);

3. 扩展jQuery选择器插件

例如实现一个选取一定区间的元素选择器:between

(function($){
    $.extend(jQuery:expr[":"],{
    between: function(a,i,m){
    var tmp = m[3].split(",");
    return tmp[0]-0 < i  && tmp[1]-0>i 
}
});
})(jQuery);

//插件应用
$("div:between(2,5)").css("color","#f00");