jQuery为扩展插件提拱了两个方法,分别是:

  • jQuery.extend(object) —— 给jQuery对象添加方法。
  • jQuery.fn.extend(object) —— 为扩展jQuery类本身.为类添加新的方法;

fn表示什么呢?下面代码是jQuery源代码中定义的fn:

jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {     //…… };

从上面代码我们不难看出 jQuery.fn = jQuery.prototype。对于prototype肯定不会陌生, javascript没有明确的类的概念,但是为也更方便理解它我们通常会用到类。

那么有fn和没有fn有什么区别呢?

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。

如以下代码:

$.extend({
  add:function(a,b){return a+b;}
});

这样就表示为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery的地方,通过$.add();就可以使用这个方法了,

jQuery.fn.extend(object); 对jQuery.prototype进行扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

如以下代码:

$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});

此时我们就可以通过 $('input').alertWhileClick();来调用这个方法了。这个里面的$('input')为jQuery的一个实例,当它调用成员方法 alertWhileClick后,便实现了扩展。

参考文档:https://www.cnblogs.com/keyi/p/6089901.html

jQuery插件扩展方法的更多相关文章

  1. Jquery自定义扩展方法(二)--HTML日历控件

    一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看 ...

  2. 编写jQuery插件的方法和注意点

    编写jQuery插件的方法和注意点 插件的种类 jQuery的插件主要分为3种类型. 1. 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的 ...

  3. JS,JQuery的扩展方法

    转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            ...

  4. jQuery插件制作方法详解

        jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...

  5. jquery validate验证插件扩展方法(转)

    /***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...

  6. JQuery 插件一般方法

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  7. 为Jquery类和Jquery对象扩展方法

    转:https://www.cnblogs.com/keyi/p/6089901.html jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend( ...

  8. JavaScript | JQuery插件定义方法

    参考 http://www.2cto.com/kf/201507/417874.html ——————————————————————————————————————————————————————— ...

  9. jquery插件扩展的学习

    jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...

随机推荐

  1. oc 目录结构

    最顶级的oc2是一个项目名,下级的oc2下面的文件是一些程序文件(.m或者.h的文件)和一些界面文件(.xib或者storyboard文件),supporting files文件下面的是资源文件,可以 ...

  2. Android笔记(十)ListView

    ListView是Android中最经常使用的控件之中的一个,也是最难用的控件. ListView的作用是展示大量的数据,只是ListView并非直接和数据打交道.而是通过适配器作为中间桥梁. 1.首 ...

  3. WIN7下恼人的AppData——删除没用的缓存文件

    今日.打开电脑,发现C盘可用容量居然变得非常小.认为非常是可疑,例如以下图所看到的: 最初的反应是电脑中毒了,于是使用360卫士.360杀毒对C盘查杀,由于明明记得C盘有40多G的可用空间才对.出现这 ...

  4. python解压压缩包的几种方法

    这里讨论使用Python解压例如以下五种压缩文件: .gz .tar  .tgz .zip .rar 简单介绍 gz: 即gzip.通常仅仅能压缩一个文件.与tar结合起来就能够实现先打包,再压缩. ...

  5. EMC测试

    EMC主要包括EMI和EMS

  6. yii2 数据库操作详解(转载)

    开始使用数据库首先需要配置数据库连接组件,通过添加 db 组件到应用配置实现("基础的" Web 应用是 config/web.php),DSN( Data Source Name ...

  7. 使用latex撰写博士,硕士学位论文(浙大博士经验分享)

    使用latex撰写博士,硕士学位论文(浙大博士经验分享) 浙大博士:  个人感觉,还是要用latex来写.因为之前发过几篇word排版的中文论文,在参考文献的引用.文字格式调整上,实在是难受.如果坚持 ...

  8. scrapy 的一个例子

    1.目标: scrapy 是一个爬虫构架,现用一个简单的例子来讲解,scrapy 的使用步骤 2.创建一个scrapy的项目: 创建一个叫firstSpider的项目,命令如下: scrapy sta ...

  9. Android开发14——监听内容提供者ContentProvider的数据变化

    一.提出需求 有A,B,C三个应用,B中的数据需要被共享,所以B中定义了内容提供者ContentProvider:A应用修改了B应用的数据,插入了一条数据.有这样一个需求,此时C应用需要得到数据被修改 ...

  10. nginx反向代理配置实例分享

    nginx反向代理配置一例. 配置内容如下: user www www; worker_processes 8; error_log /usr/local/webserver/nginx/logs/n ...