jQuery插件的写法

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

创新互联公司专注于企业成都营销网站建设、网站重做改版、岫岩网站定制设计、自适应品牌网站建设、html5、成都做商城网站、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为岫岩等各大城市提供网站开发制作服务。

1、概述

先看看html代码

 
 

  
  
 
  
  
    
jQuery
 
  
  
    
Asp.net
 
  
  
    
Sql Server
 
  
  
    
CSS
 
  
  
 
 
 

比如我们要实现当光标移动到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); 
 
 

***，使用插件的方法如下：

 
 

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

标题名称：jQuery插件的写法
本文地址：http://www.csdahua.cn/qtweb/news34/530034.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网