jQuery插件编写的原理

想写一个jQuery的小插件，可是没接触过，上网看别人的也看不懂，现在也算看出一点小小的原理了

1.类级别插件，直接jQuery.xxx()或$.xxx()调用，类似$.ajax();

//全局函数$.foo=function (){console.info('foo')}$.foo();//jQuery.extend()$.extend({test1:function(){console.info("test1");},test2:function(data){console.info("test2"+data);}});$.test1();$.test2("ang");//命名空间$.mySpace={test1:function(){console.info("mySpace1");},test2:function(data){console.info("mySpace2"+data);}}$.mySpace.test1();$.mySpace.test2("ang");

结果：

2.对象级别

<script type="text/javascript">(function($){$.fn.extend({color:function(options){options=$.extend({//默认参数color:"red",width:"100px",height:"30px"},options);//传递的参数，如果有传递的参数，默认里面的相同属性会被传递的参数给覆盖$(this).css("color",options.color);$(this).height(options.height);$(this).width(options.width);}});})(jQuery);$(function(){$("#test1").color();$("#test2").color({color:"#EEAD0E",height:"20px"});$("#test3").color({color:"#blue",width:"80px"});});</script>

结果：

分解介绍：

1.对象级别的插件格式，基本都是这样的格式

(function($){//需要实现的代码})(jQuery);

2.options是要传递的参数，是个数组，里面包含了要控制的属性

options=$.extend({

options={

}

},options);

这样用$.extend();后面的options如果有跟前面默认的options的相同的属性，就会覆盖掉默认的属性。这样，在调用函数的时候可以传递参数，实现想要达到的目的。

比如:

var opt1={name:'aaa',age:'25',sex:'男'}；var opt2={name:'bbb',age'30'};$.extend(opt1,opt2);结果是：{name:'bbb',age:'30',sex:'男'}

3.

$(this).css("color",options.color);$(this).height(options.height);$(this).width(options.width);

这里的this是调用方法的对象，里面的属性，要用options.xxx的方式调用