教你怎么写jQuery的插件

教你怎么写jQuery的插件

http://www.zc520.cc/jquery/94.html

一、插件的种类：

• 封装对象方法的插件
  这种插件是将对象方法封装起来，用于对通过选择器获取的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插件

1. 封装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代码如下：

01	;(function($){

02	$.fn.extend({

03	"color":function(value){

04	if (value ==undefined){

05	return this.css("color");

06

} else {

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

08

}

09

}

10

});

11	})(jQuery);

此时，color()插件的功能已经全部实现了，通过该插件可以获取和设置元素的color值。实际上，css()方法内部已经有判断value是否为 undefined的机制，所以才可以根据传递参数的不同而返回不同的值，因此，可以借助css()方法的这个特性来处理这个问题。删除if()部分，最 终剩余的代码实际上与先前的那段一模一样。代码如下：

1	;(function($){

2	$.fn.extend({

3	"color":function(value){

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

5

}

6

});

7	})(jQuery);