jQuery插件开发方式主要有三种：
1、通过$.extend()来扩展jQuery
主要是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法
2、通过$.fn 向jQuery添加新的方法
3、通过$.widget()应用jQuery UI的部件工厂方式创建
主要是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等
<script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $.extend({ sayHello: function(name) { console.log(‘Hello,‘ + (name ? name : ‘Test‘) + ‘!‘); } }) $.sayHello(); //调用 $.sayHello(‘lihongxu‘); //带参调用 </script>
<script type="text/javascript"> $.extend({ log: function(message) { var now = new Date(), y = now.getFullYear(), m = now.getMonth() + 1, //！JavaScript中月分是从0开始的 d = now.getDate(), h = now.getHours(), min = now.getMinutes(), s = now.getSeconds(), time = y + ‘/‘ + m + ‘/‘ + d + ‘ ‘ + h + ‘:‘ + min + ‘:‘ + s; console.log(time + ‘ My App: ‘ + message); } }) $.log(‘initializing...‘); //调用 </script>
$.fn.pluginName = function() { //your code goes here }
说明：在$.fn后面添加一个方法，名字是我们的插件名称。然后插件代码在这个方法里面展开。
<script type="text/javascript"> $.fn.myPlugin = function() { //在这里面,this指的是用jQuery选中的元素 //example :$(‘a‘),则this=$(‘a‘) this.css(‘color‘, ‘red‘); }; </script> <a href="http://www.jd.com" >京东</a> <script type="text/javascript"> $(function(){ $(‘a‘).myPlugin(); }); </script>
<script type="text/javascript"> $.fn.myPlugin2 = function() { //在这里面,this指的是用jQuery选中的元素 this.css(‘color‘, ‘red‘); this.each(function() { //对每个元素进行操作 $(this).append(‘ ‘ + $(this).attr(‘href‘)); }) }; </script> <a href="http://www.jd.com" >京东</a> <script type="text/javascript"> $(function(){ $(‘a‘).myPlugin2(); }); </script>
<script type="text/javascript"> $.fn.myPlugin3 = function() { //在这里面,this指的是用jQuery选中的元素 this.css(‘color‘, ‘red‘); return this.each(function() { //对每个元素进行操作 $(this).append(‘ ‘ + $(this).attr(‘href‘)); }) }; </script>
1、在处理插件参数的接收上，通常使用jQuery的extend方法，但那是给extend方法传递单个对象的情况下，这个对象会合并到jQuery身上，所以我们就可以在jQuery身上调用新合并对象里包含的方法了，像上面的例子。当给extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。
2、利用这一点，我们可以在插件里定义一个保存插件参数默认值的对象，同时将接收来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数使用指定的值，未指定的参数使用插件默认值。
为了演示，再指定一个参数fontSize，允许调用插件的时候设置字体大小。
示例代码：
<script type="text/javascript"> $.fn.myPlugin4 = function(options) { var defaults = { ‘color‘: ‘red‘, ‘fontSize‘: ‘12px‘ }; var settings = $.extend(defaults, options); return this.css({ ‘color‘: settings.color, ‘fontSize‘: settings.fontSize }); } </script> <script type="text/javascript"> $(‘a‘).myPlugin4({ ‘color‘: ‘#2C9929‘, ‘fontSize‘: ‘20px‘ }); </script>
2.4、保护好默认参数
注意到上面代码调用extend时会将defaults的值改变，这样不好，因为它作为插件因有的一些东西应该维持原样，另外就是如果你在后续代码中还要使用这些默认值的话，当你再次访问它时它已经被用户传进来的参数更改了。
一个好的做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
$.fn.myPlugin = function(options) { var defaults = { ‘color‘: ‘red‘, ‘fontSize‘: ‘12px‘ }; var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数 return this.css({ ‘color‘: settings.color, ‘fontSize‘: settings.fontSize }); }
原文：http://www.cnblogs.com/bjlhx/p/6679548.html