细说 jQuery 插件篇（二） – 添加实例方法

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

添加实例方法

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

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

$('div').myMethod();

进入页面后：

实例方法添加成功。

切换类插件

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

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

添加一个实例方法 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');
});

此时，点击按钮后：

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

参考

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

您可能感兴趣的文章：
细说 jQuery 插件篇（二） – 添加实例方法
jQuery源码分析系列
细说 jQuery 插件篇（一） – 添加全局函数
细说 jQuery 事件篇（二） – 处理简单事件
细说 jQuery DOM操作篇（二） – DOM 树操作
细说 jQuery 事件篇（四） – 改变事件过程
国外一个超赞的jQuery插件开发模式借鉴
细说 jQuery 样式篇（二） – 动画效果
细说 jQuery 元素篇（一） – 理解 DOM
细说 jQuery 事件篇（五） – 事件的移除和重绑定