jquery插件编写

Jquery 的插件编写

0. 插件的种类

一. 封装对象方法的插件

这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件

有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式"插"在内核上，例如parent()方法、appendTo()方法等不少DOM的操作方法。

二. 封装全局函数的插件

可以将独立的函数加到jQuery命名空间之下。例如jQuery.noConfilict()方法、常用的jQuery.ajax()方法等都是jQuery内部作为全局函数的插件附加到内核上的。

三. 选择器插件

个别情况下，会需要用到选择器插件。随软jQuery的选择器十分强大，但还是需要扩充一些自己喜欢的选择器。例如用：color(red）来选择所有红色字的元素之类的想法。

1. 闭包

利用闭包的特性，既可以避免内部临时变量影响全局空间，有可以在插件内部继续使用$作为jQuery的别名。常见的jQuery插件都是以下这种形式的：

代码//注意为了更好的兼容性，开始前有个分号

; (function ($) {//此处将$作为匿名函数的形参

/*这里放置代码，可以使用$作为jQuery的缩写别名*/

//定义一个局部变量foo,仅函数内部可以访问，外部无法访问

var foo;

var bar=function(){

/*

在匿名函数内部的函数都可以访问foo，即便是在匿名函数的外部调用bar()的时候，可以在bar()的内部访问到foo,但在匿名函数的外部直接访问foo是做不到的

*/

}

/*

下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围内，这样就可以在匿名函数的外部通过调用jQuery.BAR()来访问内部定义的函数bar();丙炔内部函数bar()也能访问匿名函数的变量foo

*/

$.BAR=bar;

})///这里就将jQuery作为实参传递给匿名函数了

jQuery 提供了两个用于扩展jQuery功能的方法，即：jQuery.fn.extend()方法和jQuery.extend()方法。前者用于扩展之前提到的3中类型插件的第1种，后者用于扩展后两种插件。这两个方法都接受一个参数，类型为Object。Object 对象的"名/值"对分别代表“函数或方法名/函数主体” 。

jQuery.extend()除了可以用于扩展jQuery对象之外，还有一个很强大的功能，就是用于扩展

已有的Object的对象。

jQuery.extend(target,obj1,....[objN])

用于一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。

代码var settings={ validate:false, limit:5,name:"foo"};

var options={validate:true, name:"bar"};

var newOptions=jQuery.extend(settings,options);

///结果为

newOptions={ validate:true, limit:5, name:"bar"};

jQuery.extend（）方法经常被用于设置插件方法的一系列默认参数，

function foo(options){

options=jQuery.extend({

name:"bar",

length:5,

dataType:"XML"

}, options)

};

foo({ name:"a",length:"4"});

foo();

color的插件：

gt: function (a, i, m){

return i>m[3]-0;

}

第一个参数为a，指向的是当前遍历到的DOM元素

第二个参数为i, 指的是当前遍历到的DOM元素的索引值，从0开始

第三个参数m最为特别,它是由jQuery正则解析引擎进一步解析后的产物，是一个数组

m[0], 以上面的$("div:gt(1)")这个例子来讲，是:gt(1)这部分。它是jQuery选择器进一步要匹配的内容

m[1], 即选择器的引导符，匹配例子中的":" ，即冒号。用户还可以自定义其他选择引导符

m[2], 即例子中的“1”,它非常有用，是编写选择器函数最重要的参数

m[3], 比较罕见

代码

red

blue

green

yellow

使table颜色变色的插件

代码