使用两种方式自定义jQuery插件

自定义jquery插件可以在函数级别定义也可在对象级别定义，而每种级别的插件都可以传参和不传参。
1.添加jQuery对象级的插件，是给jQuery对象添加方法
写法：

;(function($){  

    $.fn.extend({  

        "函数名":function(自定义参数){  

            //这里写插件代码  

        }  

    });  

})(jQuery);  

或者  

;(function($){  

    $.fn.函数名=function(自定义参数){  

        //这里写插件代码  

    }  

})(jQuery);  
调用方法：$("#id").函数名(参数);

2.jQuery类级别的插件，相当于添加静态方法


;(function($){  

    $.extend({  

        "函数名":function(自定义参数){  

            //这里写插件代码  

        }  

    });  

})(jQuery);  

或者  

;(function($){  

    $.函数名=function(自定义参数){  

        //这里写插件代码  

    }  

})(jQuery);  
调用方法：$.函数名(参数);

jquery插件的种类：
  1.对象级别的插件开发，即给jQuery对象添加方法，封装对象方法的插件，如:parent()、appendTo()
  2.一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法，jQuery的全局函数就是属于jQuery命        名空间的函数，封装全局函数的插件
  3.选择器插件
jQuery插件机制
  jQuery为开发插件提拱了两个方法，分别是：
     jQuery.fn.extend(object); 给jQuery对象添加方法。
     jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法，可以理解为添加静态方法。
     这两个方法都接受一个参数，类型为Object，Object对应的"名/值对"分别代表"函数或方法体/函数主体"。
 fn 是什么东西呢？
 查看jQuery代码，就不难发现：

<span style="font-size:12px;">jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....　 //...... }; </span>  

 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然javascript没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如  我们用 语句　$("#btn1")
会生成一个 jQuery类的实例。
 jQuery.fn.extend(object)， 对jQuery.prototype进行扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。即：$("#id").object();

 jQuery.extend()方法除了可以扩展jQuery对象外，还可以扩展已有的Object对象，经常被用于设置插件方法的一系列默认参数，可以很方便的用传入的参数来覆盖默认值
 jQuery.extend(object1,object2)object1默认参数值，object2传入的参数值；

<span style="font-size:12px;">var settions ={validate:false,limit:5,name="foo"};  

var options ={validate:true,name="bar"};  

var newOptions=jQuery.extend(settings,options);  

结果为：</span>  

<span style="font-size:12px;">newOptions = {validate:true,limit:5,name="bar"};  

  

function foo(options){  

    options = jQuery.extend({  

            name="bar",  

            length:5,  

                dataType="xml" /*默认参数*/  

        },options    /*options 为传递的参数*/  

    );  

}</span>  

 如果用户调用foo()方法的时候，在传递的参数options对象中设置了相应的值，
 那么就使用设置的值，否则使用默认值，调用方法：

<span style="font-size:12px;">foo({name:"a",length:4,dataType:"json"});  

foo({name:"a"});  

foo();</span>  

编写jQuery插件

 封装jQuery对你方法的插件，首先需要在javaScript文件里搭好框架，代码如下：

<span style="font-size:12px;">;(function($){  

    //这里写插件代码  

})(jQuery);</span>  

 1.对象级别的插件开发，即给jQuery对象添加方法，封装对象方法的插件，如:parent()、appendTo()

  由于是对jQuery对象的方法扩展，因此采用扩展第1类（封装对象方法）插件的方法jQuery.fn.extend()来编写

<span style="font-size:12px;">;(function($){  

 $.fn.extend({  

  "color":function(value){  

  //这里写插件代码  

  }  

 });  

})(jQuery);</span>  
  或者

<span style="font-size:12px;">;(function($){  

 $.fn.color=function(value){  

   //这里写插件代码  

 }  

})(jQuery);</span>  

  这里的方法提供一个参数value,如果调用方法时传入value，那么就用这个值来设置字体颜色,否则就是获取匹配无此的字体颜色的值

<span style="font-size:12px;">;(function($){  

    $.fn.extend({  

        "color":function(value){  

            return this.css("color",value);  

        }  

    });  

})(jQuery);</span>  

  插件内部的this指向的是jQuery对象，而非普通的DOM对象。接下来注意的是，插件如果不需要返回字符串之类的特定值，应当使其具有可链接性。
  为此，直接返回这个this这个对象，由于css()方法也会返回调用它的对象，即此外的this，因此可以将代码写成上面的形式;

  调用时可直接写成：$("div").color("red");

  另外如果要定义一组插件，可以使用如下所示写法：

<span style="font-size:12px;">;(function($){  

    $.fn.extend({  

        "color":function(value){  

            //这里写插件代码  

        },  

        "border":function(value){  

            //这里写插件代码  

        },  

        "background":function(value){  

            //这里写插件代码  

        }  

    });  

})(jQuery);</span>  

2.封装全局函数的插件

 这类插件是在jQuery命名空间内部添加一个函数。这类插件很简单，只是普通的函数，没有特别需要注意的地方。

 例如新增两个函数，用于去除左侧和右侧的空格。

 首先构建一个Object对象，把函数名和函数都放进去，其中的名/值对分别为函数名和函数主体
 然后利用jQuery.extend()方法直接对jQuery对象进行扩展

 jQuery代码如下：

<span style="font-size:12px;">;(function($){  

    $.extend({  

        ltrim:function(text){  

            return (text||"").replace(/^\s+g,"");  

        },  

        rtrim:function(text){  

            return (text||"").replace(/\s+$/g,"");  

        }  

    });  

})(jQuery);  

或者  

;(function($){  

    $.ltrim=function(text){  

        return (text||"").replace(/^\s+g,"");  

    },  

    $.rtrim=function(text){  

        return (text||"").replace(/\s+$/g,"");  

    }  

      

})(jQuery);</span>  

 *(text||"")部分是用于防止传递进来的text这个字符串变量处于未定义的特殊状态，如果text是undeined，则返回字符串""，否则返回字符串text。
  这个处理是为了保证接下来的字符串替换方法replace()方法不会出错
 *运用了正则表达式替换首末的空格

 调用函数：

<span style="font-size:12px;">$("trimTest").val(  

    jQuery.trim(" test ")+"\n"+  

    jQuery.ltrim(" test ")+"\n"+  

    jQuery.rtrim(" test ")  

);</span>  

 运行代码后，文本框中第一行字符串左右两侧的空格都被删除。
 第二行的字符串只有左侧的空格被删除。
 第三行的字符串只有右侧的空格被删除。