jQuery 07 编写插件

编写插件的目的是封装已经有的一系列方法或函数，以便在其他地方重复使用。jQuery插件主要分为3种类型：

1 对象方法的插件，将对象方法封装起来，通过选择器获取的jQuery对象进行操作，是最常见的一种插件。有相当一部分的jQuery的方法，都是通过这样方式插在内核上的，例如parent(),appendTo()。

2 全局函数的插件，可以将独立的函数加到jQuery命名空间之下。

3 选择器插件，个别情况下，会用到选择器插件。

jQuery插件的文件名推荐为
jquery.[插件名].js

所有的对象方法都应当附加在
jQuery.fn对象上，所有的全局函数都应到附加在
jQuery对象本身上。

在插件内部，
this指向的是当前通过选择器获取的jQuery对象

可以通过this.each来遍历所有元素

所有的方法或函数插件，都应当以分号结尾。为了更稳妥，甚至可以在插件头部先加上一个分号。

插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的数量。

避免在插件内部使用$作为jQuery对象的别名，应该使用完整的jQuery来表示。也可以用闭包方式。

常见的插件格式

;(function($){

//在此处编写jQuery插件代码

})(jQuery);

jQuery提供了两个用于扩展jQuery功能的方法，
jQuery.fn.extend()和
jQuery.extend()方法。

jQuery.extend()
经常用于设置插件方法的默认参数。

function(options){

//设置默认值

options=
jQuery.extend()(
{

odd:"odd", /* 偶数行样式*/

even:"even", /* 奇数行样式*/

selected:"selected" /* 选中行样式*/

},
options);

封装jQuery对象方法的插件

<script type="text/javascript">

//插件编写

;(function($) {

jQuery.fn.extend({

"color":function(value){

return this.css("color",value);

}

});

})(jQuery);

//插件应用

$(function(){

$("div").click(function(){

var color = $(this).text();

$("div").
color( color ); //设置所有的div的字体颜色

})

})

</script>

<script type="text/javascript">

//插件编写

;(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);

//如果选中，则移出selected类，否则就加上selected类

$(this)[hasSelected?"removeClass":"addClass"](options.selected)

//查找内部的checkbox,设置对应的属性。

.find(':checkbox').attr('checked',!hasSelected);

});

// 如果单选框默认情况下是选择的，则高色.

$('tbody>tr:has(:checked)',this).addClass(options.selected);

return this; //返回this，使方法可链。

}
});

})(jQuery);

//插件应用

$(function(){

$("#table2")

.
alterBgColor() //应用插件

.find("th").css("color","red");//可以链式操作

})

</script>

全局函数插件

<script type="text/javascript">

//插件编写

;(function($) {

$.extend({

ltrim : function( text ) {

return (text || "").replace( /^\s+/g, "" )

},

rtrim : function(text ) {

return (text || "").replace( /\s+$/g, "" )

}

});
})(jQuery);

//插件应用

$(function(){

$("#trimTest").val(

jQuery.trim(" test ") + "\n" +

jQuery.ltrim(" test ") + "\n" +

jQuery.
rtrim(" test ")

);

})

</script>

自定义选择器插件

jQuery的选择符解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每个选择符执行一个函数，称为选择器函数。最后根据这个选择器函数的返回值决定是否保留这个元素。

例如：$("div:gt(1)"),选择器首先会获取所有的<div>元素,然后隐式遍历这些元素，并逐个将这些<div>元素作为参数，连同括号里的 1 等参数，一起传递给gt对应的选择器函数进行判断。

:gt()选择器在jQuery源文件中的代码如下：

gt:

function(a,i,m){

return i>m[3]-0;

}

选择器函数一共接受3个参数：

参数
a，指向当前遍历到的DOM元素。

参数
i，指向当前遍历的DOM元素的索引值,从0开始。

参数
m，是有jQuery正则解析引擎进一步解析后的产物(用match匹配出来)，是一个数组。

m[0],以上面的$("div:gt(1)")为例，是:gt(1)部分。

m[1],是选择器的引导符，上例中为 :

m[2],即例子中的gt,

m[3],即括号中的数据1

m[4],这个比较罕见，例如$("div:l(ss(dd))"),m[4]就指向了
(dd)部分，此时m[3]的值是
ss(dd)

<script type="text/javascript">

//插件编写

;(function($) {

$.extend(jQuery.expr[":"], {

between : function( a , i ,m )
{

var tmp=
m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组

return tmp[0]-0<
i &&
i<tmp[1]-0; //用tmp[0]-0可以转换为数字

}

});

})(jQuery);

//插件应用

$(function(){

alert("执行前");

$("
div:between(2,5)").css("background","white");

alert("执行后");

})

</script>