jquery 插件开发

1 $.extend({
2         sayHello:function(name){
3         console.log(‘Hello：‘+name);
4         }
5     });
6 
7 $.sayHello("张三");//调用

 1 $.fn.myPlugin=function(){
 2     //在这里面,this指的是用jQuery选中的元素
 3     //例如 :$(‘a‘),则this=$(‘a‘)
 4     this.css(‘color‘,‘red‘);
 5     this.each(function(){
 6         $(this).append(‘: ‘+$(this).attr(‘href‘));
 7     });
 8 }
 9         
10     //支持链式调用
11     $.fn.myPlugin = function() {
12         //在这里面,this指的是用jQuery选中的元素
13         this.css(‘color‘, ‘red‘);
14         return this.each(function() {
15             //对每个元素进行操作
16             $(this).append(‘ ‘ + $(this).attr(‘href‘));
17         })
18     }  
19 
20 
21      //传递参数
22     $.fn.myPlugin = function(options) {
23         var defaults = {
24             ‘color‘: ‘red‘,
25             ‘fontSize‘: ‘12px‘
26         };
27         var settings = $.extend(defaults, options);
28         return this.css({
29             ‘color‘: settings.color,
30             ‘fontSize‘: settings.fontSize
31         });
32     } 
35     //保护默认参数 的 方法 
36     $.fn.myPlugin = function(options) {
37         var defaults = {
38             ‘color‘: ‘red‘,
39             ‘fontSize‘: ‘12px‘
40         };
41         var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数
42         return this.css({
43             ‘color‘: settings.color,
44             ‘fontSize‘: settings.fontSize
45         });
46     }  
48     //面向对象+用自调用匿名函数包裹你的代码
49     //定义Beautifier的构造函数
50     (function() {
51         var Beautifier = function(ele, opt) {
52             this.$element = ele,
53             this.defaults = {
54                 ‘color‘: ‘red‘,
55                 ‘fontSize‘: ‘12px‘,
56                 ‘textDecoration‘:‘none‘
57             },
58             this.options = $.extend({}, this.defaults, opt)
59         }
60         //定义Beautifier的方法
61         Beautifier.prototype = {
62             beautify: function() {
63                 return this.$element.css({
64                     ‘color‘: this.options.color,
65                     ‘fontSize‘: this.options.fontSize,
66                     ‘textDecoration‘: this.options.textDecoration
67                 });
68             }
69         }
70         //在插件中使用Beautifier对象
71         $.fn.myPlugin = function(options) {
72             //创建Beautifier的实体
73             var beautifier = new Beautifier(this, options);
74             //调用其方法
75             return beautifier.beautify();
76         }
77     })();