细说 jQuery 插件篇(二) - 添加实例方法

前一篇介绍可以通过添加全局函数来开发 jQuery 插件,实际上全局函数就是对 jQuery 对象进行扩展,而添加实例方法就是对 jQuery.prototype 对象进行扩展,我们可以使用别名 – jQuery.fn

添加实例方法

(function($) {
  $.fn.myMethod = function() {
    alert('it works');
  }
}(jQuery));

此时页面内只有一个 div 元素,添加新增的实例方法:

$('div').myMethod();

进入页面后:

《细说 jQuery 插件篇(二) - 添加实例方法》

实例方法添加成功。

切换类插件

我们来写一个用于切换元素类的小插件。页面有个小按钮,当点击按钮后我们希望能切换颜色:

<style>
.blue {
  background-color: lightblue;
}
.green {
  background-color: lightgreen;
}
</style>
<button class="blue">change</button>

《细说 jQuery 插件篇(二) - 添加实例方法》

添加一个实例方法 switchClass 来实现该效果:

(function($) {
  $.fn.switchClass = function(class1, class2) {
    if (this.hasClass(class1)) {
      this.removeClass(class1).addClass(class2);
    }
    else if (this.hasClass(class2)) {
      this.removeClass(class2).addClass(class1);
    }
  };
})(jQuery);

使用该插件方法:

$('button').click(function() {
  $('button').switchClass('blue', 'green');
});

此时,点击按钮后:

《细说 jQuery 插件篇(二) - 添加实例方法》

再点击颜色会切换回蓝色。

参考

http://book.douban.com/subject/24669823/

    原文作者:StephenLee
    原文地址: https://segmentfault.com/a/1190000000586783
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞