如何编写一个Jquery插件
首先我们来搞清楚一些关于Jquery插件的知识:
一、插件的种类：
- 封装对象方法的插件
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件 - 封装全局函数的插件
将独立的函数加到jQuery的命名空间之下 - 选择器插件
虽然jQuery的选择器已经十分的强大了，但还是会需要扩充一些自己喜欢的选择器
二、插件的基本要点
- 插件的文件名推荐为 jquery.[插件名].js，例如jquery.color.js
- 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上
- 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素
- 可以通过this.each来遍历所有元素
- 所有的方法或函数插件，都应当以分号结尾，否则压缩时可能出问题，有的为了更加稳妥些，在插件的开始处加上一个分号
- 插件应该返回一个jQuery对象，这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等
- 尽量利用闭包技巧历来避免变量名的冲突
三、插件中的闭包
关于闭包：ECMAScript对其进行了简单的描述：允许使用内部函数（即函数定义和函数表达式位于另一个函数的函数体内），而且这些内部函数可以访问他们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数，当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。即内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必须访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。
所以利用闭包的特性，既可以避免内部临时变量影响全局空间，又可以再插件内部继续使用$作为jQuery的别名。最常见的jQuery插件的形式如下：
;(function($){//此处将$作为匿名函数的实参
/*这里放置代码，可以使用$作为jQuery的缩写别名*/
})(jQuery)//这里就将jQuery作为实参传递给匿名函数了
四、编写jQuery插件
- 封装jQuery对象方法的插件
- 编写设置和获取颜色的插件
首先介绍如何编写一个color()插件。此插件用于实现以下两个功能：
(1)设置匹配元素的颜色。
(2)获取匹配的元素(元素集合中的第一个)的颜色
首先按照规范，将此插件命名为jquery.color.js
由于是对jQuery对象的方法扩展，所以采用扩展第一类插件的方法jQuery.fn.extend()来编写，代码如下：
;(function($){
$.fn.extend({
“color”:function(value){
//这里写插件代码
}
});
})(jQuery);
这里给这个方法提供一个参数value，如果调用方法的时候传递了value这个参数，那么就是用这个值来设置字体颜色；否则就是获取匹配元素的字体颜色的值。
首先实现第一个功能，设置字体颜色。只需要简单地调用jQuery提供的css()方法，直接写成this.css(“color”,value)即可。需要注意的是插件内部的this指向的是jQuery对象，而非普通的DOM对象。接下来要注意的是，插件如果不需要返回字符串之类的特定值，应当使其具有可链接性。为此，直接返回这个this对象，由于css()方法也会返回调用它的对象，即此处的this，因此可以将代码写成：
;(function($){
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
接下来实现第二个功能。如果没有给方法传递参数，那么就是获取集合对象中第一个对象的color的值。由于css()方法本身就具有返回第一个匹配元素的样式值的功能，因此此处无须通过eq()来获取第一个元素。只要将这两个功能结合起来，判断一下value是否是undefined即可。
jQuery代码如下：
;(function($){
$.fn.extend({
"color":function(value){
if (value ==undefined){
return this.css("color");
} else {
return this.css("color",value);
}
}
});
})(jQuery);
此时，color()插件的功能已经全部实现了，通过该插件可以获取和设置元素的color值。实际上，css()方法内部已经有判断value是否为undefined的机制，所以才可以根据传递参数的不同而返回不同的值，因此，可以借助css()方法的这个特性来处理这个问题。删除if()部分，最终剩余的代码实际上与先前的那段一模一样。代码如下：
;(function($){
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
这样一来，插件也就编写完成了。现在来测试一下此插件。
您可以狠狠地点击这里去看看demo
今天就先讲到使用封装jQuery对象方法的插件的写法，改天有时间再接着讲封装全局函数的插件和自定义选择器的插件的写法。
参照
View Code
if (jQuery) ( function (jQuery) { jQuery.extend(jQuery.fn, { tablePaging: function (options) { jQuery(this).each(function () { settings = jQuery.extend({ id: jQuery(this).attr('id'), // The ID of the object being paging pageSize: 10, // The size of one page sorting: false, sortDirection: 'asc', // asc & desc sortSelector: '', sortType: '', //number,string,date onPaged: null // // Function to run after paged }, options); }); $(this).each(function () { if (settings.sorting) { jQuery(this).tableSort(settings.sortSelector, settings.sortType, settings.sortDirection); } var pageSize = parseInt(settings.pageSize); var trResult = jQuery('#' + jQuery(this).attr('id')).find('tbody:first tr'); var trLen = trResult.length; var pageIndex = 0; if (!jQuery(this).data("pageindex")) { jQuery(this).data("pageindex", "0"); }; pageIndex = parseInt(jQuery(this).data("pageindex")); if (pageIndex * pageSize == trLen && trLen != 0) { pageIndex = pageIndex - 1; // make sure the last page will show right jQuery(this).data("pageindex", pageIndex); } jQuery('#' + jQuery(this).attr('id')).find('tbody').each(function (i, element) { var trs = $(this).find('tr'); var trsLen = trs.length; trs.hide(); trs.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize).show(); }); var allPage = Math.ceil(parseInt(trLen) / pageSize); if (allPage > 1) { jQuery("#" + jQuery(this).attr('id') + "Paging").remove(); jQuery("#" + jQuery(this).attr('id')).after('<div id="' + jQuery(this).attr('id') + 'Paging" class="search-for"></div>'); queue = '#' + jQuery(this).attr('id') + 'Paging'; jQuery(queue).append('<p class="paging"><a id="prePage" tableid="' + jQuery(this).attr('id') + '" pageindex=' + (parseInt(jQuery(this).data("pageindex")) - 1) + ' href="#">previous</a> | ' + (parseInt(jQuery(this).data("pageindex")) + 1) + '/' + allPage + ' | <a id="nextPage" tableid="' + jQuery(this).attr('id') + '" pageindex=' + (parseInt(jQuery(this).data("pageindex")) + 1) + ' href="#">next</a></p>'); jQuery("#" + jQuery(this).attr('id') + "Paging").find("#prePage").bind("click", settings, function (e) { // var toPageIndex = settings.pageIndex - 1; var toPageIndex = parseInt(jQuery(this).attr("pageindex")); if (toPageIndex < 0) toPageIndex = allPage - 1; jQuery("#" + jQuery(this).attr("tableid")).data("pageindex", toPageIndex); jQuery("#" + jQuery(this).attr("tableid")).tablePaging(e.data); e.preventDefault(); }); jQuery("#" + jQuery(this).attr('id') + "Paging").find("#nextPage").bind("click", settings, function (e) { //var toPageIndex = settings.pageIndex + 1; var toPageIndex = parseInt(jQuery(this).attr("pageindex")); if (toPageIndex >= allPage) toPageIndex = 0; jQuery("#" + jQuery(this).attr("tableid")).data("pageindex", toPageIndex); jQuery("#" + jQuery(this).attr("tableid")).tablePaging(e.data); e.preventDefault(); }); } else { jQuery("#" + jQuery(this).attr('id') + "Paging").remove(); } if (jQuery.isFunction(settings.onPaged)) { settings.onPaged(); } }); }, tableSort: function (sortBySelector, type, sortDirection) { jQuery('#' + jQuery(this).attr('id')).find('tbody').each(function (i, element) { var trs = jQuery(element).find('tr'); var tmp = []; for (var i = 0; i < trs.length; i++) { tmp.push(trs[i]); } if (type == "number") { tmp.sort(function (a, b) { var inta = Number($.trim($(a).find(sortBySelector).text())); var intb = Number($.trim($(b).find(sortBySelector).text())); var returnValue = 0; if (inta > intb) returnValue = 1; else if (inta < intb) returnValue = -1; if (sortDirection == "desc") returnValue = -returnValue; return returnValue; }); } else if (type === "date") { tmp.sort(function (a, b) { var datea = parseDate($.trim($(a).find(sortBySelector).text())); var dateb = parseDate($.trim($(b).find(sortBySelector).text())); var returnValue = 0; if (datea > dateb) returnValue = 1; else if (datea < dateb) returnValue = -1; if (sortDirection == "desc") returnValue = -returnValue; return returnValue; }); } else { tmp.sort(function (a, b) { var stra = $.trim($(a).find(sortBySelector).text()); var strb = $.trim($(b).find(sortBySelector).text()); var returnValue = 0; if (stra > strb) returnValue = 1; else if (stra < strb) returnValue = -1; if (sortDirection == "desc") returnValue = -returnValue; return returnValue; }); } for (var i = 0; i < tmp.length; i++) { trs[i] = tmp[i]; } jQuery(element).empty().append(trs); }); } }) })(jQuery); function parseDate(date) { return Date.parse(convertDateFormat(date)); // from en-GB format to en-US format,must greater than 01/01/1970; } function convertDateFormat(value) { return value = value.toString().replace(/\-/g, '/').replace(/\./g, '/').replace(/\s/g, '/'); }
浙公网安备 33010602011771号