当前位置:jQuery学习 > jQuery > jQuery插件的写法

jQuery插件的写法

时间:2010-09-01QQ群:116983258

这几天在学习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);

最后,使用插件的方法如下:

//使用插件
$(document).ready(function() {
    $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});
作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/how-to-write-jquery-plugin.html

大家说了些什么

  1. 1. Goode 2010-12-19 00:00

    喜欢你的文章,这篇jQuery插件的写法不错,希望你继续努力!

  2. 2. le 2011-01-24 16:09

    支持好文章,支持!

  3. 3. JQFan 2011-05-03 12:26

    我也用jquery写了个搜索的小玩意。

  4. 4. cnzzx.com 2012-01-06 11:15

    好,学习了。正在学jquery插件怎么写呢。

  5. 5. 北京-asp.net 2012-02-15 11:20

    var items = $("li a", obj);这个怎么理解呢,有点空难哈

    • jQuery学习 2012-02-15 13:19

      @北京-asp.net

       var items = $("li a", obj); 
      就是在obj中查找"a",jQuery核心函数中第一个,你应该看看文档~

  6. 6. Grabb 2014-05-20 14:45

    $(this).find("li a") 还是习惯这样写

    • jQuery学习 2014-05-20 15:20

      @Grabb 我也是,这老外写法么。

所有话题