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

发布时间:2019-05-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了细说 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/

脚本宝典总结

以上是脚本宝典为你收集整理的细说 jQuery 插件篇(二) - 添加实例方法全部内容,希望文章能够帮你解决细说 jQuery 插件篇(二) - 添加实例方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: