标签：
来自锋利的jquery第二版
下面我们开始介绍如何通过现有的方法和函数，封装出既符合自己需求，有高效的插件。
Jquery插件公分为3类，分别为：封装对象方法的插件、封装全局函数的插件、自定义选择器插件，在介绍插件的三种类型之前，我们先来了解书写插件的基本要点（这里转自aspwzmuma和锋利的jquery）：
a.插件的文件命名推荐遵循jQuery.[插件名].js的规则,以便于与其他的js文件的区分,如新插件文件jquery.newplugin.js.
b.对象级别插件,所有的方法都应依附于jquery.fn主体对象;类级别插件,所有的方法都应依附于jquery对象
c.插件的内部,this所代表的是通过jQuery选择器所获取的对象,不像一般方法那样。如：click()方法，内部this指向的是绑定click的DOM对象。
d.可以通过$.each来遍历所有的元素。
e.无论是对象级别还是类级别插件,结尾都必须以分号结束,否则,在文件被压缩时,会出现错误提示信息.为了避免不要的麻烦，我们可以在插件的开头加上分号。
f.插件应该返回一个jquery对象，以保证可以链式操作。除非插件是需要返回字符串或数字等等量的参数。
g.插件内避免使用$作为jquery对象的别名，而是应该使用完整的Jquery来表示。这样做可以避免冲突。但是，如果坚持$也可以，我们可以通过闭包的方式来规避这个问题。
如以下代码:
;(function($){
Var foo;
Var bar=function(){
}
$.bar=bar;
})(jQuery)
h.jquery提供了两种用于拓展jquery功能的方法。第一种方法$.fn.extend(),适用于创建第一种类型的插件，第二种方法$.extend(),适用于后两种插件。
1、封装对象方法的插件
何为封装对象方法的插件呢？说白了就是将对象方法封装起来，然后可以通过jquery选择器获取的对象进行操作，如$(“element”).action(),这个action就是封装的对象，类似jquery的parent()、addClass()方法。代码如下：
;(function($){
$.fn.extend({
//颜色设置
"color":function(value){
return this.css("color",value);
}
//表格隔行变色，选中高亮显示（checkBox选中，颜色高亮）
,"table":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").prop("checked",!hasSelected);
});
//如果单选框默认是选中的状态，则该行高亮显示
$("tbody>tr:has(:checked)",this).addClass(options.selected);
return this; //返回this，使得方法可链
}
});
})(jQuery)
//调用
$(“div”).color(“red”);
$(“table”).table({
odd:"odd",
even:"even",
selected:"selected"
});
2、封装全局函数的插件
这类插件是在jQuery名空间里面添加的一个函数，下面以去除字符串左边或右边空格为例，代码如下：
;(function($){
$.extend({
ltrm:function(value){
return (value || "").replace(/^\s/g,"");
},
rtrim:function(value){
return (value || "").replace(/\s+$/g,"");
}
});
})(jQuery)
//调用
Var str1=$.ltrm(str);
3、自定义选择器插件
尽管jQuery的选择器已经很强大，但是不代表其已经尽善尽美，开发者有时候需要一些符合自己需求的强大选择器。这是jquery提供的用户可自定义选择器的方法就发挥了很大作用，使得jquery选择器功能更加完善。废话不多说了，直接上代码：
;(function($) {
$.extend(jQuery.expr[":"], {
between : function( a , i ,m ) {
//将传递进来的m[3]以逗号为分隔符，切成一个数组
var tmp=m[3].split(",");
return tmp[0]-0<i&&i<tmp[1]-0;
}
});
})(jQuery);
这里a指向的是当前遍历到的DOM元素；i指的是当前遍历到DOM元素的索引值，从0开始的；m是jquery正则解析引擎进一步解析后的产物，返回的是一个数组，下面我们以$(“div:gt(1)”)为例解析m参数：
m[0]jquery要进一步匹配的内容，‘gt(1)’;
m[1]选择器的引导符，上面例子中为冒号‘：’，用户可以自定义引导符；
m[2]要调用的选择器函数，例子中是gt()函数;
m[3]表示选择器函数的参数。
标签：
原文地址：http://www.cnblogs.com/hcw136156133/p/5031219.html
