注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到
1:添加全局类的方法
常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法
1 $.extend({ 2 add:function(a,b){return a+b;}, 3 minus:function(a,b){return a-b;} 4 }); 5 6 var i= $.add(100,200); 7 var j= $.minus(100,200); 8 alert(i+'##'+j);
第6行和第7行就可以使用该方法,对于js的全局静态公用方法,都可以这样写,将其他语言中的Global,Helper或者Utils等等文件中的方法,在js中可以用这种扩展jQuery的方法去做
2:添加对象的方法
下面要给按钮标签自定义一些方法,通过jQuery来调用(注意,按钮使用了bootstrap的样式,不过这对于下面的演示没有关系^_^)
1 <div id="btn" class="btn btn-danger"> 2 按钮点击 3 </div>
下边给按钮自定义了一个初始化的方法,让按钮把传入的参数显示在content上,而且还自定义了一个press的回调事件的方法
1 +function($){ 2 var parms={ 3 name:"pluign", 4 version:"2.0" 5 }; 6 var showDesc=function(obj){ 7 $(obj).text(JSON.stringify(parms)); 8 } 9 $.fn.initButton=function(options){ 10 $.extend(parms,options); 11 return this.each(function(){ 12 showDesc(this); 13 $(this).on('click',function(){ 14 parms.press.apply(this); 15 }); 16 }); 17 } 18 }(jQuery); 19 $('#btn').initButton({ 20 name:'hello world', 21 sex :'Male', 22 press:function(){ 23 alert('click button'); 24 } 25 });
第1行到18行是对jQuery的扩展,注意第一行的+号的写法,其实就是(function($){})(jQuery);
博主是参照Bootstrap的源码的写法,至于为什么这样写,猜测估计是为了省一个括号“)”字符吧,呵呵
方法中的showDesc将传入参数显示到按钮上
具体效果如下:
由此可见:传入的参数,都可以在jQuery扩展中拿到,这样就可以在自己的扩展插件中做任意想做的事情了。