如何编写自己的jquery插件

如何编写自己的 jquery 插件 Jquery 的插件主要分为三类： 、封装对象方法的插件：大部分插件都是封装对象的插件 、封装全局函数的插件：将独立的函数添加到 jquery 的命名空间之下。Jquery.ajax()和 jquery.trim()就是 jquery 内部作为全局函数的插件添加到内核上去的。 、选择器插件：扩充自己喜欢的一些选择器。 编写 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 = +(msg ? msg : 正在提交 您的请求，请稍后.); else if (type =notice) tipHtml = +msg else if (type =error) tipHtml = +msg else if (type =succ) tipHtml = +msg if ($(.msgbox_layer_wrap) $(.msgbox_layer_wrap).remove(); if (st) clearTimeout(st); $(“body“).prepend(“+tipHtml+“); $(“.msgbo