自己动手开发jQuery插件教程

2020-05-23 06:08:37易采站长站整理

因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就头痛的人来说,一天时间8小时,保守估计有5个小时在弄css(我css文盲级别,形容得还不够贴切,如果说文盲不会写字,只会说话,那我是连话都不会说的级别。),好了,废话少说,切入正题。
首先要了解jQuery插件开发分两种,1.类级别的插件开发。2.对象级别插件开发。

什么? 你居然问什么是类级别和什么是对象级别?
类级别你可以理解为拓展jquery类,最简单的$.post(…);
对象级别则可以理解为基于对象的拓展,如$(“#Me”).fuck(…); 这里这个fuck呢,就是基于对象的拓展了。点到即止,想深入的童鞋请花RMB买书Or网上查资料,书上比俺介绍得更清楚。so…Next…
至于您要写一个什么东东呢?就轮到前面提到的类级别和对象级别的造型登场了,因为这写法大千世界无奇不有,千奇百怪,各有千秋,写法规范也不统一,俺就按俺觉得最简便的方法写了,Hava a Look!

<script type=”text/javascript”>
jQuery.msg = function () {
alert(“123”);
};
</script>
<script type=”text/javascript”>
$(function () {
$.msg();
});
</script>

类级别写法:jQuery.插件名称=function(){…..};
调用方法:$.插件名称();
暴露参数这些东西,先暂时不提到。一步步来..
上面这玩意儿呢,弹出对话框插件,这么说,是先理解要紧,什么是插件,什么是类级别的插件?来看一下页面启动的效果,上图上真相,你懂的..

来比较一下对象级别插件写法:Go on!

(function($) {
$.fn.pluginName = function() {
// 代码区域。
};
})(jQuery);

对象级别写法:$.fn.插件名称 = function(){};多了一个fn,没错,是fn! fn!!! fn!!!
调用方法:$(“#Me”).插件名称();
稍微说一下,$.插件名称();是通过$访问调用jquery中的全局函数,直接可以通过jquery或者美元$调用,从而实现一些效果。
$(“#Me”).插件名称();是通过一个jquery对象所调用的一个函数,什么? 你居然发现这个写法外面一层多了个东东? 阿? 你问怎么回事?
The First,我们必须先了解一下闭包这个玩意儿的造型(框架),Look!,这就是传说中用来开发jQuery插件的东东

(function($){
//这里是您写东东的地方,不收地税,工商税,个人所得税等..放心大胆使用。
})(jQuery);

(function($){ //这里是您写东东的地方,不收地税,工商税,个人所得税等..放心大胆使用。})(jQuery);