jquery想开发jQuery插件？跟我来

zccst转载

首先了解两个概念

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

jQuery(function(){});
//全写为
jQuery(docunemt).ready(function(){
});

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

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

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

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

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

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

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

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

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

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

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



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

(function($){
$.fn.setFont= function(options){
  var data = {
  color:"red",
  fontSize:"15px",
  fontWeight:"normal",
  fontFamiay:"微软雅黑" 
}
var ds = $.extend(data,options);
$(this).css(ds); 
}
})(jQuery);

body体内容

<divid="show">
sssss
</div>
<button id="btn">点击</button>

调用

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

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

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