如何编写自己的jquery插件

转  http://wenku.baidu.com/view/914ff757804d2b160b4ec075.html

Jquery的插件主要分为三类：

1、封装对象方法的插件：大部分插件都是封装对象的插件

2、封装全局函数的插件：将独立的函数添加到jquery的命名空间之下。Jquery.ajax()和jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的。

3、选择器插件：扩充自己喜欢的一些选择器。

 

编写Jquery插件的基本要点：

、一般命名的时候最好是按照jquery.[插件名].js命名。

、所有的对象都应当附加到jquery.fn对象上，所有的全局函数应该附加到jquery对象本身上

、通过this.each()来便利对象，这里的this指向的是当前选择器通过选择器获取的jquery对象

、所有的方法或者函数插件都要以分号结尾，否则压缩的话就会出现问题，有时候甚至要在头部也要加上“;”,以免不规范的代码给写的插件带来影响。

插件应当返回一个jquery对象，以便可以进行链式操作，除非你是要返回某个特定类型的参数，比如字符串和数组。

要注意$和jquery两个符号的冲入，可以利用闭包这种技术来回避这个问题。

 

允许使用内部函数，而且，这些内部函数可以访问他们所在的外部函数中声明的局部变量参数和声明的其他的内部函数，当其中一个这样的内部函数在包含他们的外部函数之外被调用时，就会形成闭包。

“闭包”是一个很复杂的概念，对于编写jquery插件其实是有一个模板的，这个模板中就有用到闭包的概念。

 

常见的jquery插件的都是有如下的格式的：

;(function($){   

$.fn.yourName = function(options){  //各种属性、参数

}

       var options = $.extend(defaults, options);//定义参数

       this.each(function(){

        //插件实现代码

       });

    };

})(jQuery);

注解：

(1)、“;(function($){   })(jQuery);”使用了匿名函数，表示在方法体内的”$”表示的就是”jquery”,为了有更好的兼容性，所以在前面添加一个分号

,这里的$符号是作为匿名函数的形参

(2)、$.extend(defaults, options);表示的是如果options中的参数总是有值的话，那么options中的值将会代替defaults中的值。举个例子来说：

Var setting={validate:true,limit:5,name:foo};

Var options={validate:fasle,name:tom};

Var newoptions=$.extend(setting，options)；

那结果就是newoptions={validate:false,limit:5,name:tom}.

所以Jquery.extend()(或者是$.extend())经常来设置插件的一些默认的参数。

还有就是$.extend()用来扩展方法，和jquery.fn.extend()一样都是可以的，他们的区别在于：前者不使用jquery的方法，而后者使用了jquery的方法，就像 addClass(),remove()等。所以可想而知大部分的现有插件都是jquery.fn.extend()进行扩展的。

 

function foo(options){

options=jquery.extend({

Name：“bar”,

Length：5，

dataType:”xml”

},options);

};

如果options参数传入的值为空，那么就可以使用默认设置的值。

 

例子:

;(function($)){

$.fn.extend({

“functionname”：function(options){//某个方法名

Options=$.extend({

odd:”odd”,

even:”even”

},options);

//可以通过options.元素名称来获取元素之，如options.odd

//some codes

$(“.table”).addClass(“”);//为某个元素添加样式等等

}

//一个方法结束

//另一个方法 this.cleartb = function() {//同时你也可以这么写，这里cleartb就是方法的名称     $('#emed_tb01').remove();//方法要做的事情 }

});

}

 

那我们在使用的时候就可以：

$(“#id_”).cleartb();//选中id为“id_”的元素执行上面插件中的cleartb的方法。

 

下面给出一个完整的插件的例子供参考：这个插件是一个消息提示的插件，

 

 

;(function($){

    $.fn.manhuaTip = function(options) {//扩展函数manhuaTip

        var defaults = {//默认值

            Event : "click",

            timeOut : 2000

        };

        var options = $.extend(defaults,options);//以传参覆盖

        var $tip = $(this);//选定操作的jquery元素为当前选中的元素

        $tip.live(options.Event,function(e){   

            var type = $(this).attr('ty');       

            var msg = $(this).attr('msg');

              var tipHtml = '';

            if (type =='loading'){

                tipHtml = '<img alt=""src="../images/loading.gif">'+(msg ? msg : '正在提交您的请求，请稍后...');

            } elseif (type =='notice'){

                tipHtml = '<spanclass="gtl_ico_hits"></span>'+msg

            } elseif (type =='error'){

                tipHtml = '<span class="gtl_ico_fail"></span>'+msg

            } elseif (type =='succ'){

                tipHtml = '<spanclass="gtl_ico_succ"></span>'+msg

            }

            if ($('.msgbox_layer_wrap')) {

               

                $('.msgbox_layer_wrap').remove();

            }

            if (st){

                clearTimeout(st);

            }

            $("body").prepend("<div class='msgbox_layer_wrap'><spanid='mode_tips_v2' style='z-index: 10000;' class='msgbox_layer'><spanclass='gtl_ico_clear'></span>"+tipHtml+"<spanclass='gtl_end'></span></span></div>");

            $(".msgbox_layer_wrap").show();

            var st = setTimeout(function (){

                $(".msgbox_layer_wrap").hide();

                clearTimeout(st);

            },options.timeOut);

        });   

    }

 

   

})(jQuery)