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

chanjarster 发布于2019-08-19 14:55 / 2782人阅读

摘要：前一篇介绍可以通过添加全局函数来开发插件，实际上全局函数就是对对象进行扩展，而添加实例方法就是对对象进行扩展，我们可以使用别名。添加实例方法此时页面内只有一个元素，添加新增的实例方法进入页面后实例方法添加成功。

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

添加实例方法

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

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

$("div").myMethod();

进入页面后：

实例方法添加成功。

切换类插件

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

添加一个实例方法 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/

GPU云服务器云服务器 jquery插件源码jquery jquery插件手写jQuery插件 jquery表单插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78170.html

细说 jQuery 插件篇（一） - 添加全局函数

摘要：添加全局函数所谓全局函数就是对象的方法，例如在一篇中介绍的等方法。当我们希望将一些功能性代码重复使用，可以将其打包成一个 jQuery 插件来使用。使用 $ 别名首先我们在编写插件时必须保证 jQuery 库已经载入，但是我们不能保证 $ 一定可用，为了使用 $ 别名，我们可以利用 IIFE （Immediately Invoked Function Expression），...

joyvw 2019-08-19 14:55 评论0 收藏0
细说 jQuery 样式篇（二） - 动画效果

摘要：创建一个有背景色的添加方法如下当页面载入后，会逐渐消失，动画效果如同直接使用方法。动画并发效果当对多个元素应用动画效果时，这些效果是同时发生的，即并发的。除了使用 jQuery 内置的 hide,show,toggle 等方法来展现效果，还可以使用更为强大的 animate 方法来展现动画效果。创建一个有背景色的 div： div { width: 100px; hei...

PiscesYE 2019-08-19 14:53 评论0 收藏0
细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0