这几天在学习jQuery插件的写法，搜索了一些资料，包括jQuery官方的示例，但发现描述的并不是很清晰。最后，终于搜索到一篇讲解比较清晰的文章，这里自己总结了一下，并以一个具体的示例来说明jQuery插件的写法。

1、概述

先看看html代码

1 
       
         2     
        
jQuery
 3     
        
Asp.net
 4     
        
Sql Server
 5     
        
CSS
 6 
       

比如我们要实现当光标移动到a标签上时，a标签向右移动一段距离，离开时a位置恢复。实现方法如下：

1 $(document).ready(function() {
     2     $("#catagory a").hover(function() {
     3         $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 }); 4     }, function() {
     5         $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 }); 6     }); 7 });

现在我们将这个方法进行扩展，写成jQuery插件的形式，以后也能在别的项目中使用，并且可以方便的更改一些属性值，现在我们来看看jQuery插件的写法。

2、jQuery插件的结构

下边这个结构应该是编写jQuery插件的一个比较好的结构，我将原作者的一些注释进行了相应的翻译。

1 //为避免冲突，将我们的方法用一个匿名方法包裹起来  2 (function($) {
      3  4     //扩展这个方法到jquery  5     $.fn.extend({
      6  7         //插件名字  8         pluginname: function() {
      9 10             //遍历匹配元素的集合 11             return this.each(function() {
     12 13                 //在这里编写相应代码进行处理 14 15             }); 16         } 17     }); 18 19  //传递jQuery到方法中，这样我们可以使用任何javascript中的变量来代替"$"      20 })(jQuery);

接下来，我们给插件中加入一些可以改变的属性，这样用户可以根据自己的需要来做一些更改。同时，我们应提供相应的默认值。

 

1 (function($){   2    3     $.fn.extend({    4            5     //将可选择的变量传递给方法  6         pluginname: function(options) {   7    8    9             //设置默认值并用逗号隔开 10             var defaults = {  11                 padding: 20,  12                 mouseOverColor : '#000000',  13                 mouseOutColor : '#ffffff'  14             }  15                   16             var options =  $.extend(defaults, options);  17   18             return this.each(function() {  19                 var o = options;  20                   21                 //这里编写相应代码 22                 //可以像下边这样获取变量值 23                 alert(o.padding);  24               25             });  26         }  27     });  28       29 })(jQuery);

3、实现jQuery插件

1 (function ($) {
      2     $.fn.extend({
      3         //插件名称 - paddingList  4         paddingList: function (options) {
      5  6             //参数和默认值  7             var defaults = {
      8                 animatePadding: 10,  9                 hoverColor: "Black" 10             }; 11 12             var options = $.extend(defaults, options); 13 14             return this.each(function () {
     15                 var o = options; 16 17                 //将元素集合赋给变量 本例中是 ul对象 18                 var obj = $(this); 19 20                 //得到ul中的a对象 21                 var items = $("li a", obj); 22 23                 //添加hover()事件到a 24                 items.hover(function () {
     25                     $(this).css("color", o.hoverColor); 26                     //queue false表示不添加到动画队列中 27                     $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 }); 28 29                 }, function () {
     30                     $(this).css("color", ""); 31                     $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 }); 32                 }); 33 34             }); 35         } 36     }); 37 })(jQuery);

最后，使用插件的方法如下：

1 //使用插件 2 $(document).ready(function() {
     3     $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" }); 4 });

这里是最后的