jQuery的插件

还在编辑中

---

插件是jQuery中一个非常重要的部分，对于开发人员了解jQuery插件对于提高工作的效率会有很好的帮助。当我们使用到某种效果，我们不一定要自己编写实现这一效果的代码。很多情况下，我们可以借助jQuery丰富的插件库来简化我们的工作。有时候，我们可能又不满足于仅仅使用插件库中的插件，我们可以把我们所编写的插件封装起来，从而保证后续反复调用。这也就构成jQuery插件的两个非常重要的内容：插件的使用和插件的开发。

插件的使用

调用插件的方法非常简单，只要找到插件的URL，在HTML中引用它，然后在脚本中使用即可。
常见的插件

插件的开发

插件开发可以分成以下内容：编写全局函数插件、编写选择符插件、编写jQuery对象方法插件（编写DOM元素遍历方法插件）、编写事件插件、使用jQuery UI部件工厂编写插件

编写选择符插件

基于选择符的Sizzle模块是jQuery非常重要的核心组件，可以通过代码片段的封装创建选择符表达式。
由于jQuery本身一直在变化更新中，jQuery内部对于选择符的支持方式也一直在变动当中，这也为编写一个可以使用的选择符插件带来很大的不变。在jQuery 1.7.1中，通过添加

(function($) {  $.extend($.expr[':'], {    group: function(element, index, matches, set) {      var num = parseInt(matches[3], 10);      if (isNaN(num)) {        return false;      }      return index % (num * 2) < num;    }  });})(jQuery);

在1.7.1版本中，选择符解析器的操作原理较为简单，通过使用一组正则表达式来解析选择符，然后针对解析出的每个选择符执行选择器函数。最后根据选择器函数返回值为true还是false来决定是否保留这个元素。这里可以参照jQuery 1.7.1中:eq()选择符的定义源码：

eq: function( elem, i, match ) {    return match[3] - 0 === i;}

match是正则表达式的捕获组，其中match[3]包含的内容是选择符中的参数。
到了1.8.1，jQuery修改了选择符的内部定义方法，例如:eq()的定义中使用了.splice() 方法，从而返回筛选后的数组：

"eq": function( elements, argument, not ) {    var elem = elements.splice( +argument, 1 );    return not ? elements : elem;}

1.9.1以及之后版本中定义了一个createPositionalPseudo() 函数，这个函数会返回markFunction()，而markFunction()在修改引入的函数参数的expando属性以后会再次返回作为参数的函数。:eq()源码中调用了这个函数，

"eq": createPositionalPseudo(function( matchIndexes, length, argument ) {    return [ argument < 0 ? argument + length : argument ];}),

jQuery内部支持的转变也会印象到

(function($) {  $.expr.setFilters.group = function(elements, argument, not) {    var resultElements = [];    for (var i = 0; i < elements.length; i++) {      var test = i % (argument * 2) < argument;      if ((!not && test) || (not && !test)) {        resultElements.push(elements[i]);      }    }    return resultElements;  };})(jQuery);

编写全局函数插件

全局函数是jQuery对象的方法，是位于jQuery命名空间内部的函数。可以提供一些常用功能的快捷方式

(function($) {  $.extend({    sum: function(array) {      var total = 0;      $.each(array, function(index, value) {        value = $.trim(value);        value = parseFloat(value) || 0;        total += value;      });      return total;    },    average: function(array) {      if ($.isArray(array)) {        return $.sum(array) / array.length;      }      return '';    }  });})(jQuery);$.sum();$.average();

$.extend()可以给全局函数jQuery对象添加属性，通过$.extend()可以定义$.sum()方法
关于$.extend()的实现原理可以参照《jQuery技术内幕》

为了防止全局函数污染命名空间，可以给全局函数创建一个的命名空间。在添加命名空间之后，全局函数实际上已经变成mathUtils对象的方法

(function($) {  $.mathUtils = {    sum: function(array) {      var total = 0;      $.each(array, function(index, value) {        value = $.trim(value);        value = parseFloat(value) || 0;        total += value;      });      return total;    },    average: function(array) {      if ($.isArray(array)) {        return $.mathUtils.sum(array) / array.length;      }      return '';    }  };})(jQuery);$.mathUtils.sum();$.mathUtils.average();

编写jQuery实例方法插件

与添加全局函数不同的是，添加实例方法插件扩展的是jQuery.fn对象（在jQuery的源码中，jQuery.fn = jQuery.prototype，即jQuery.fn是jQuery的原型对象的简化）