目的：虽然jQuery各种各样的功能已经很完善了，但是我们还是要学会自己去编写插件。这样我们可以去封装一些项目中经常用到的专属的代码，以便后期维护和提高开发效率。
jQuery插件的类型：
- 封装对象方法的插件
- 大部分jQuery的插件都属于这种，对获取的jQuery对象进行操作
- 封装全局函数的插件
- 可以理解为$.ajax这种就是封装的全局函数
- 选择器插件
- 顾名思义，封装的选择器
jQuery插件的基本要点：
- jQuery插件的文件名推荐为：jquery.[插件名].js,以免和其它js库插件混淆。
- 所有对象方法应该附加到jQuery.fn对象上，所有全局方法应该附加到jQuery对象本身上。
- 在插件内部，this指向的是当前获取的jQuery对象，而不是DOM元素
- 可以通过this.each来遍历所有元素
- 插件应该返回一个jQuery对象，以保证插件的可链式操作。
- 避免在插件内部使用$，而应该使用完整的jQuery。当然也可以用闭包的技巧来回避这个问题。
(function($){
//此处编写jQuery插件代码，这种闭包玩法就不在这里解释了，我前面的js基础系列写过了，不懂的请转到这个地址看看http://www.cnblogs.com/vvjiang/p/5143852.html。在此篇文章最后的部分就是。
})(jQuery);
jQuery插件的机制：
jQuery提供了两个用于扩展jQuery功能的插件，即jQuery.fn.extend()方法和jQuery.extend()方法。
前者实现封装对象方法的插件，后者实现封住选择器插件和全局函数插件。
jQuery.extend()除了用于扩展jQuery对象之外，还可以扩展已经存在的object对象，所以经常被用于设置插件方法的一系列默认参数。如：
function myFunc(options){
options=jQuery.extend({
name:"bar",
length:1
},options);
}
myFunc({name:"asd"});//此时函数调用后options的name为asd，length为1
编写jQuery插件
- 封装jQuery对象方法的插件
- 那就举个表格隔行变色的例子
(function($){
$.fn.extend({
"alterBgColor":function(options){
options=$.extend({//设置默认参数
odd:"odd",/*偶数行样式*/
even:"even", /*奇数行样式*/
selected:"selected"/*选中行样式*/
},options);
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even",this).addClass(options.even);
$("tbody>tr",this).click(function(){
var hasSelected=$(this).hasClass(options.selected);
$(this)[hasSelected?"removeClass":"addClass"](options.selected)
.find(":checkbox").attr('checked',!hasSelected);
});
$("tbody>tr:has(:checked)",this).addClass(options.selected);
return this;//返回this，支撑链式操作
}
});
})(jQuery);$("tbody>tr:odd",this)这种用法在加上第二个参数this后，第一个参数的选择器就只会在this这个对象下进行筛选。
- 那就举个表格隔行变色的例子
- 封装全局函数的插件
- 去除左空白字符和去除右空白字符的插件例子：
(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
- 去除左空白字符和去除右空白字符的插件例子：
- 自定义选择器的插件
- 选择索引介于两个数中间的元素的选择器插件例子：
(function($){
$.extend(jQuery.expr[":"],{
between:function(a,i,m){//选择器函数
//a指向的是当前遍历到的DOM元素
//i指的是当前遍历到的DOM元素的索引值
//m最为特别，它是由jQuery正则解析引擎进一步解析后的产物，是一个数组
//这里只讲m[3]，比如选择器:gt(2)那么m[3]就为2，如果是多个，那么就是"2,5"这种以逗号分隔的参数字符串
var tmp=m[3].split(",");//以逗号为分隔符，切成一个数组
return tmp[0]-0<i&&i<tmp[1]-0;//这里用-0可以将字符串转换为数字
}
});
})(jQuery);
$("div:between(2,5)")
- 选择索引介于两个数中间的元素的选择器插件例子：