示例简易的jquery插件开发过程

插件开发常见到，这里是在网上看到的写法，大致摘录学习一下，原文见后面链接，首先来了解一下必要的知识。

一，首先了解两个概念
jquery(function(){})与(function(){}(jQuery)的区别
1,jQuery(function(){});
全写为
jQuery(docunemt).ready(function(){});
意义为在DOM加载完毕后执行ready()方法

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

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

二，对于 $.extend 和 $.fn.extend 的区别

$.extend(object); 为扩展jQuery类本身，为类添加新的方法。
$.fn.extend(object); 给jQuery对象添加方法。

必须清楚这二者的区别：一个为类扩展，一个为类的实例做扩展！

以下更助于理解：
jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {
　　　//......
      }
};

三，插件实例
下面介绍一个编写简单：为一个元素节点设置样式,

//写插件之前必须导入jquery库！
(function($){ //示例插件，名称为setFont
	$.fn.setFont = function(options){
		var data = {
			color:"red",
			fontSize:"15px",
			fontWeight:"normal",
			fontFamiay:"微软雅黑" 
		}
		var ds = $.extend(data,options);
		$(this).css(ds); 
	}
})(jQuery);
//可见上面的插件写法中 jQuery 主要是作为一个强有力的工具以参数的形式传递给函数，以便在函数内部使用jQuery；模型本质是闭包函数，即：()(param)

HTML内容：
<div id="show"> sssss </div>
<button id="btn">点击</button>

$("#btn").click(function(){ //名为setFont的插件使用
$("#show").setFont({color:"blue",fontSize:'30px'});
});

以上仅仅是模拟jQuery插件的写法，当然用jQuery内置的css方法设置样式更好。

原文链接：

http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0520/190.html