想开发jQuery插件？跟我来

首先了解两个概念

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

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类扩展一个方法

$.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插件开发就结束了~~

共同学习！共同进步！

原文地址：