jQuery插件的写法

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

1、概述

先看看html代码

<ul id="catagory"> 


    <li><a href="#">jQuery</a></li> 


    <li><a href="#">Asp.net</a></li> 


    <li><a href="#">Sql Server</a></li> 


    <li><a href="#">CSS</a></li> 


</ul> 

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

$(document).ready(function() { 


    $("#catagory a").hover(function() { 


        $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 }); 


    }, function() { 


        $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 }); 


    }); 


}); 

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

2、jQuery插件的结构

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

//为避免冲突，将我们的方法用一个匿名方法包裹起来 


(function($) { 


 


    //扩展这个方法到jquery 


    $.fn.extend({ 


 


        //插件名字 


        pluginname: function() { 


 


            //遍历匹配元素的集合 


            return this.each(function() { 


 


                //在这里编写相应代码进行处理  


 


            }); 


        } 


    }); 


 


 //传递jQuery到方法中，这样我们可以使用任何javascript中的变量来代替"$"       


})(jQuery);  

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

(function($){   


   


    $.fn.extend({    


           


    //将可选择的变量传递给方法 


        pluginname: function(options) {   


   


   


            //设置默认值并用逗号隔开 


            var defaults = {   


                padding: 20,   


                mouseOverColor : '#000000',   


                mouseOutColor : '#ffffff'   


            }   


                   


            var options =  $.extend(defaults, options);   


   


            return this.each(function() {   


                var o = options;   


                   


                //这里编写相应代码  


                //可以像下边这样获取变量值  


                alert(o.padding);   


               


            });   


        }   


    });   


       


})(jQuery);   

3、实现jQuery插件

(function ($) { 


    $.fn.extend({ 


        //插件名称 - paddingList 


        paddingList: function (options) { 


 


            //参数和默认值 


            var defaults = { 


                animatePadding: 10, 


                hoverColor: "Black" 


            }; 


 


            var options = $.extend(defaults, options); 


 


            return this.each(function () { 


                var o = options; 


 


                //将元素集合赋给变量 本例中是 ul对象  


                var obj = $(this); 


 


                //得到ul中的a对象 


                var items = $("li a", obj); 


 


                //添加hover()事件到a 


                items.hover(function () { 


                    $(this).css("color", o.hoverColor); 


                    //queue false表示不添加到动画队列中 


                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 }); 


 


                }, function () { 


                    $(this).css("color", ""); 


                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 }); 


                }); 


 


            }); 


        } 


    }); 


})(jQuery);