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