jquery插件理解看这

一个更换背景颜色的小插件

html

1	<div >content</div>

javascript

1 2 3 4 5 6 7 8 9 10 11 12 13

//改变元素背景颜色 ;(function($){ $.fn.vgoPlugin = function(option){ var opts = $.extend({}, $.fn.vgoPlugin.defaults , option); this.css('backgroundColor',opts.color); }; $.fn.vgoPlugin.defaults = { color:'#f60' }; })(Zepto); //$("#box").vgoPlugin(); //$("#box").vgoPlugin({color:'#369'});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 ;(function($){
    $.extend($.fn, {
    vgoPlugin1: function(option){
           var defaults = {
                   color:'red'
         };
               var opts = $.extend({},defaults , option);//注意这里顺序option在前面
          this.css('background',opts.color);
            return this;
         }
    })
})(Zepto);
 //$("#box").vgoPlugin1();
 //$("#box").vgoPlugin1({color:'#369'});