【jquery】jquery插件的开发

zccst转载 

首先了解两个概念 

1，jquery(function(){})与(function(){}(jQuery)的区别 

Js代码  

1. jQuery(function(){});  
2. //全写为  
3. jQuery(docunemt).ready(function(){  
4. });  

意义为在DOM加载完毕后执行ready()方法 

Js代码  

1. （funtion(){  
2. }(jQuery);  
3. //实际执行()(para)匿名方法，只不过传递了jQuery对象。  

总结： 
jQuery(funtion(){});用于存放DOM对象的代码，执行其中代码时DOM对象已经存在。 
不可用于存放开发插件代码。因为jQuery对象没有得到传递，外部通过jQuery.methodye 
调用不来其中方法。 

（funtion(){ 
}(jQuery);用于存放开发插件的代码，执行其中代码DOM不一定存在，直接自动执行DOM操作代码请小心使用 

2，对于$.extend和$.fn.extend的区别 
$.extend(object);为扩展jQuery类本身.为类添加新的方法。 
$.fn.extend(object);给jQuery对象添加方法。 
必须清楚这二者的区别：一个为类扩展，一个为类的实例做扩展！ 
在放一个便于理解的东西： 

Js代码  

1. jQuery.fn= jQuery.prototype = {  
2. 　　　init: function( selector, context ) {//....　  
3. 　　　//......  
4. };  

明白了？哦~原来如此！ 
我们先来个测试：为jquery类扩展一个方法 

Js代码  

1. $.extend({  
2.   hialert:function(e){alert(e);}  
3. })  

调用：$.hialert(‘hello alert’); 
如果为类的实例做扩展，那么您需要这么写： 

Js代码  

1. $.fn.extend({  
2.   hialert:function(e){alert(e);}  
3. });  

调用：$(节点).hialert();===>必须实例化一个类！ 



下面介绍一个实例：为一个标签可以叫做元素节点设置样式 
写插件之前必须导入jquery库！ 
插件 

Js代码  

1. (function($){  
2. $.fn.setFont= function(options){  
3.   var data = {  
4.   color:"red",  
5.   fontSize:"15px",  
6.   fontWeight:"normal",  
7.   fontFamiay:"微软雅黑"   
8. }  
9. var ds = $.extend(data,options);  
10. $(this).css(ds);   
11. }  
12. })(jQuery);  

body体内容 

Html代码  

1. <dividdivid="show">  
2. sssss  
3. </div>  
4. <button id="btn">点击</button>  

调用 

Js代码  

1. $("#btn").click(function(){  
2. $("#show").setFont({color:"blue",fontSize:'30px'});  
3. });  

我就模拟一个jquery插件的写法，不推荐使用这个做一个元素节点的设置，用内置的$(节点对象).css({})这个方法会更好！ 

到这 一个基本的jquery插件开发就结束了~~ 
共同学习！共同进步！