jquery 插件编写教程

编写jquery插件其实非常简单,代码结构也比较固定,只需要注意闭包和$.extends的使用即可。

下面以一个非常简单的higher插件来讲解jquery插件的编写过程。

higher插件作用是:当鼠标移到元素上时,高度变高,移走之后恢复。


首先,我们需要一个闭包来封装代码,避免污染window:

(function($) {
})(jQuery);

然后 我们需要把自己的插件添加到jquery的原型,即$.fn上,直接使用$.fn.extend方法即可:

(function($) {
     $.fn.extend({
          pluginName: function() {
          }
     })
})(jQuery);

当然,如果你不想用extend,直接添加 $.fn.pluginName来添加也行。

接下来就是一般插件都需要做的,提供对多个元素的支持。因为jquery选择器很可能会选择多个元素,我们需要提供对多个元素的支持,这里就需要用到 this.each方法来遍历选中的元素:

(function($) {
     $.fn.extend({
          pluginName: function() {
               return this.each(function() {
                    // here is your code
               });
          }
     })
})(jQuery);

至此,基本结构已经完成,下面就是如何实现插件的逻辑。

在实现上要注意利用闭包隐藏私有方法,然后注意一般如何使用options和defaults。这里,我们执行高度计算的函数是一个私有函数higher,整个插件代码如下:

(function($) {
    // 私有方法放在这里
    var higher = function (h, percent) {  
        return h * (100+percent) / 100;
    }
    
    // 拓展jquery 原型
    $.fn.extend({
        higher: function(options) {
            var defaults = {     // 默认设置
                percent: 20
            };
           
            var settings = $.extend(defaults, options);
            return this.each(function() {     //遍历dom
                var $this = $(this);
                var old_ = $this.height();
                var new_ = higher(old_, settings.percent)
                $this.on("mouseover", function() {
                    $this.height(new_);
                });
                $this.on("mouseout", function() {
                    $this.height(old_);
                });
            });
        }
    });
})(jQuery)

最后这样使用插件:

$('xxx').higher();
$('xxx').higher({percent:50});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值