JQuery插件开发入门(原创)

JQuery插件开发入门(原创)

作者：余超 EMail：yuchao86@gmail.com

这个月，因为一些工作上的需要重新开始以前用过的JQuery开发，而最后选择采用了插件开发，对于JQuery初学者来说，开发JQuery插件是一个高级的话题。

JQuery插件的开发一种是类级别的给JQuery添加新的全局函数，另一种是对象级别的给JQuery对象添加方法。

先给大家展示一下具体的开发环境：

[yuchao@yuchao-Latitude-E5410 ext]$pwd

/opt/lampp/htdocs/jquery/ext

[yuchao@yuchao-Latitude-E5410 ext]$ls

demo.html jquery-1.6.4.min.js jquery.yuchao.js style.css ui

[yuchao@yuchao-Latitude-E5410 ext]$

另外在demo.html中引入Jquery插件：

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>

如下加入自己开发的插件jquery.yuchao.js文件：

<script type="text/javascript" src="jquery.yuchao.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />

1 添加一个新的全局函数，可采用如下定义，使用JQuery.extend(object),

/*

*http://jquery.com/

*contact:yuchao86@gmail.com

*yuchao first extend

*/

$.extend({

add:function(a,b){return a+b;},

sub:function(a,b){return a-b;},

mut:function(a,b){return a*b;},

div:function(a,b){return a/b;}

});

如上扩展还有其他写法，使用$.extend(object)也行，

调用时候写为：

$.add(15,10); //return 25

可以写为JQuery.myPlugin = {Object}

调用时采用的方法：

$.myPlugin.add(12，34);

$.myPlugin.mut(3，5);

使用命名空间可以解决插件冲突，

2、对象级别的插件开发如下的两种形式

没有插件名称的：

(function($){

$.fn.extend({

pluginName:function(opt,callback){

// Our plugin implementation code goes here.

}

})

})(JQuery);

有插件名称的：

(function($) {

$.fn.pluginName = function() {

// Our plugin implementation code goes here.

};

})(JQuery);

上面定义了一个JQuery函数,形参是$，函数定义完成之后,把JQuery这个实参传递进去.立即调用执行。

这样的好处是,我们在写JQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

fn 是什么东西呢。查看JQuery源代码，就不难发现。

JQuery.fn = JQuery.prototype = {

　　　init: function( selector, context ) {//....　

　　　//......

};

JQuery.fn = JQuery.prototype...

JQuery是一个封装得非常好的类，比如我们用语句$("#inputtags")会生成一个JQuery类的实例。

JQuery.fn.extend(object); 对JQuery.prototype进得扩展，就是为JQuery类添加“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert当前编辑框里的内容。可以这么做：

/*

*http://jquery.com/

*contact:yuchao86@gmail.com

*yuchao first fn extend

*/

$.fn.extend({

clickAlert:function(){

$(this).click(function(){

alert($(this).val());

});

}

});

在html文件中使用$("#input1").clickAlert();便可以调用，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

到此为止，插件开发完成，实际工作中有具体的插件开发很复杂，这里只是一个简单的demo版本。

希望大家多多拍砖，多多指点。

参考官方网站文章：
http://jquery.com/ http://docs.jquery.com/Plugin