jQuery插件的写法

作者：朋友的你发布时间：2010-09-01人气：2254jQuery学习 QQ群：116983258

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

1、概述

先看看html代码

<ulid="catagory"><li><ahref="#">jQuery</a></li><li><ahref="#">Asp.net</a></li><li><ahref="#">Sql Server</a></li><li><ahref="#">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(){//遍历匹配元素的集合returnthis.each(function(){//在这里编写相应代码进行处理 });}});//传递jQuery到方法中，这样我们可以使用任何javascript中的变量来代替"$"      })(jQuery);

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

(function($){  
  
    $.fn.extend({//将可选择的变量传递给方法
        pluginname:function(options){//设置默认值并用逗号隔开var defaults ={  
                padding:20,  
                mouseOverColor :'#000000',  
                mouseOutColor :'#ffffff'}var options =  $.extend(defaults, options);returnthis.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);returnthis.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学习
原文：jQuery插件的写法。
版权所有，转载时必须以链接形式注明作者和原出处并保留本声明。
相关文章

• jQuery操作cookie
• jQuery对元素进行拖动并重新排序
• jqmodal遮罩层的实现
• 基于jQuery的一个震动效果
• jQuery插件－5个有用的jQuery插件
• jQuery插件-时间显示为“xx分钟以前”
• jQuery插件-显示图片缩略图
• jQuery插件-jQuery Lightbox之ColorBox
• jQuery插件-微软 jQuery Templates
• jQuery插件-微软 jQuery Data Linking
• 微软 jQuery Templates插件的使用
• jQuery 插件-使用jQuery Pagination实现无刷新分页
• jQuery 之父 John Resig 北京见面会视频
• jQuery 简单动画插件
• 跟我一起学写jQuery插件（附完整实例及下载）
• jQuery插件开发 - 其实很简单
• jQuery 实现图片延时加载
• 一些使用 jQuery 的大网站