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