我的第一个jQuery插件

时间:2022-06-14 14:41:40

虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的。下面,开始我的第一个插件...

参考《锋利的JQuery》,JQuery为开发插件增设了俩个方法:$.extend(object), $.fn.extend(object).

这篇博文对插件制作的讲解挺好的,就是有点长,但值得玩味:http://blog.csdn.net/guorun18/article/details/49819715

下面谈一个我对插件的(片面)理解:

插件分俩种:

·类级别组件开发:

          ---即给JQuery命名空间下添加新的全局函数,也称静态方法。形式如下: 

jQuery.myPlugin = function (){
//do something
};

例如:$.ajax(options); $.type();

 

·对象级别组件开发

           ---挂在JQuery原型下的方法,通过选择器获取的JQuery对象实例能共享该方法,称为动态方法。形式如下:

//$.fn == $.prototype
$.fn.myPlugin = function () {
//do somthing
};

例如:.addClass(); .attr();

 

同时,插件也要保持JQuery链式调用的特性,链式调用的形式如下:

$.fn.myPlugin = function (){

         return this.each(function (){   //return实现链式调用

                         //do something 

         });

};

----------------------------------以上就是插件机制---------------------------------

 下面实现一个简单的表格隔行变色插件:

 //为了更好的兼容性,前面有个分号
(function($){
$.fn.tableUI
= function(options){
var defaults = {
evenRowClass:
"evenRow",
oddRowClass:
"oddRow",
activeRowClass:
"activeRow",
clickRowClass:
"clickRow"
}
var options = $.extend(defaults, options);//$.extend(option...)返回一个对象.
//为了实现链式调用,用return返回对象
return this.each(function(){
//缓存this
var thisTable = $(this);
$(thisTable).find(
"tr:even").addClass(options.evenRowClass);
$(thisTable).find(
"tr:odd").addClass(options.oddRowClass);
$(thisTable).find(
"tr").bind("mouseover",function(){
$(
this).removeClass(options.clickRowClass).addClass(options.activeRowClass);
});
$(thisTable).find(
"tr").bind("mouseout",function(){
$(
this).removeClass(options.clickRowClass).removeClass(options.activeRowClass);
});
$(thisTable).find(
"tr").bind("click",function(){
$(
this).addClass(options.clickRowClass);
});
});
};
})(jQuery);

 

鉴于本人初次编写插件,但还是要分享一下此刻所感所悟,未来看到肯定会觉得头脑简单吧。

首先利用this传递DOM元素对象,可以看做是插件最外层的元素,然后通过JQuery提供的查询(find)方法匹配内部元素对象,将匹配到的元素配合设置的属性(options)一步一步实现想要的功能。

ps:options的类名应提前写好css样式,以备使用。