一、方式列表:
1.jQuery.extend(Object);   // jQuery 本身的扩展方法
2.jQuery.fn.extend(Object);  // jQuery 所选对象扩展方法

二、调用示例:
1.jQuery 本身的扩展方法实例如下:

jQuery.extend({
    Meg: function (message) {
        alert(message);
    },
    MegToo: function (messageToo) {
        alert(messageToo);
    }
});

页面调用:jQuery.Meg("Hi,Stone");

其中Meg和MegToo为我的jQuery自定义扩展方法,多个扩展方法之间用英文逗号隔开。

2.jQuery 所选对象扩展方法有两种书写方式:

a)jQuery 所选对象扩展方法实例一如下:

jQuery.fn.extend({
    ShowHtml: function (showhtml) {
        jQuery(this).html(showhtml);
    }
});

页面调用:jQuery("#htmlDiv").ShowHtml("Stone,Hi!");

其中ShowHtml为我的jQuery所选对象的扩展方法,多个扩展方法之间用英文逗号隔开。

b)jQuery 所选对象扩展方法实例二代码如下:

(function (jq) {
    jq.fn.ShowHtmlToo = function (showhtml) {
        jQuery(this).html(showhtml);
    };
})(jQuery)

调用相同与方式一:jQuery("#htmlDiv").ShowHtmlToo("Stone,Hi!");

总结:

1、对象级别的插件开发

//形式一

(function($){
  $.fn.extend({
    foo3:function() {
      alert('对象级别插件extend方式1');
    },
    bar3:function() {
      alert('对象级别插件extend方式2');
    }
  })
})(jQuery);

//形式二

(function($){
  $.fn.foo4 = function() {
    alert('对象级别插件fn方式');
  }
})(jQuery);

//接收参数来控制插件的行为

(function($){
  $.fn.bar4 = function(options) {
    var defaults = {aaa:'1',bbb:'2'};
    var opts = $.extend(defaults, options);
    alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
  }
})(jQuery);

//提供公有方法访问插件的配置项值

(function($){
  $.fn.foo5 = function(options) {
    var opts = $.extend({}, $.fn.foo5.defaults, options);
    alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
  }
  $.fn.foo5.defaults = {aaa:'1',bbb:'2'};
})(jQuery);

//提供公有方法来访问插件中其他的方法

(function($){
  $.fn.bar5 = function(options) {
    $.fn.bar5.alert(options);
  }
  $.fn.bar5.alert = function(params) {
    alert(params);
  }
})(jQuery);
$(function(){
  $('#test').foo3();
  $('#test').bar3();
  $('#test').foo4();
  $('#test').bar4();
  $('#test').bar4({aaa:'3'});
  $('#test').bar4({aaa:'3',bbb:'4'});
  $('#test').foo5();
  $('#test').foo5({aaa:'5',bbb:'6'});
  $('#test').bar5('aaaa');
});

2、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:
//2.1定义一个全局函数

jQuery.foo = function() {
  alert('添加一个新的全局函数');
}

//定义多个全局函数

jQuery.bar = function() {
  alert('再增加一个全局函数');
}

//2.2使用extend定义全局函数

jQuery.extend({
  foo1:function() {
    alert('extend 定义全局函数1');
  },
  bar1:function() {
    alert('extend 定义全局函数2');
  }
});

//2.3 使用命名空间定义函数

jQuery.plugin = {
  foo2:function() {
    alert('使用namespace定义函数');
  }
}
$(function(){
  $.foo();
  $.bar();
  $.foo1();
  $.bar1();
  $.plugin.foo2();
});

jQuery扩展方法笔记的更多相关文章

  1. jquery扩展方法(表单数据格式化为json对象)

    1.jquery扩展方法(表单数据格式化为json对象) <script type="text/javascript"> // 将表单数据序列化为一个json对象,例如 ...

  2. 使用jquery获取url及url参数的方法及定义JQuery扩展方法

    1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...

  3. Jquery 扩展方法

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...

  4. jquery扩展方法

    jquery插件的开发包括两种:一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jquery类本身添加方法. jquery的全局函数就是属于jquery命名空间的函数,另一种是对象级 ...

  5. Jquery 扩展方法实现原理

    JSONP原理 首先:JSON和JSONP是不一样的概念. JSON是一种数据交换格式,而JSONP是非正式传输协议. 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回 ...

  6. jquery源码解析:jQuery扩展方法extend的详解

    jQuery中要扩展方法或者属性都是通过extend方法实现的.所谓的jQuery插件也是通过extend方法实现的. jQuery.extend扩展的是工具方法,也就是静态方法.jQuery.fn. ...

  7. jquery扩展方法案例

    -----------------扩展方法: $.extend({ "max": function (a, b) { if (a > b) return a; }, &quo ...

  8. (笔记)JQuery扩展方法实现Form表单与Json互相转换

    JQuery笔记 记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上. 把表单转换出json对象 //把表单转换出json对象 $.fn.to ...

  9. jQuery扩展方法 (插件机制)

    jQuery.extend(object) 扩展jQuery对象本身. 用来在jQuery命名空间上增加新函数. 在jQuery命名空间上增加两个函数: <script> jQuery.e ...

随机推荐

  1. 磁盘分区-gdisk用法

    gdisk用法 gdisk - InteractiveGUIDpartitiontable (GPT) manipulator GPTfdisk (akagdisk) isatext-modemenu ...

  2. 利用R语言进行交互数据可视化(转)

    上周在中国R语言大会北京会场上,给大家分享了如何利用R语言交互数据可视化.现场同学对这块内容颇有兴趣,故今天把一些常用的交互可视化的R包搬出来与大家分享. rCharts包 说起R语言的交互包,第一个 ...

  3. size_t类型

    size_t在C语言中就有了.它是一种“整型”类型,里面保存的是一个整数,就像int, long那样.这种整数用来记录一个大小(size).size_t的全称应该是size type,就是说“一种用来 ...

  4. CTF 和 PHP ,数据库

    引言 接触CTF 差不多一个月了,网上题目刷得也差不多,做了不少笔记,老想总结一下.当然,这种文章网上多得是. 正文笔记 少不了弱类型,松散比较,放一张图 2.  mysql_real_escape_ ...

  5. Ch.3 Aray and String

    3-1 scrore  Here is a string with o and x. The length is between 1 to 80. Calcuate the score. The sc ...

  6. 基于NopCommerce的开发框架——缓存、网站设置、系统日志、用户操作日志

    最近忙于学车,抽时间将Nop的一些公用模块添加进来,反应的一些小问题也做了修复.另外有园友指出Nop内存消耗大,作为一个开源电商项目,性能方面不是该团队首要考虑的,开发容易,稳定,代码结构清晰简洁也是 ...

  7. PHP的面向对象 — 封装、继承、多态

    K在上一次的基础篇中给大家介绍了一下关于PHP中数组和字符串的使用方法等,这一次,K决定一次性大放送,给大家分享一下PHP中面向对象的三大特性:封装.继承.多态三个方面的知识. 一.封装 在PHP中, ...

  8. Android 图片加载框架Glide4.0源码完全解析(一)

    写在之前 上一篇博文写的是Picasso基本使用和源码完全解析,Picasso的源码阅读起来还是很顺畅的,然后就想到Glide框架,网上大家也都推荐使用这个框架用来加载图片,正好我目前的写作目标也是分 ...

  9. XWindow启动流程

    X Window系统架构 一.基本概念: 1.X Client:X客户端,运行在远端主机上 X Client最重要的工作就是处理来自 X Server 的动作,将该动作处理成为绘图数据, 再将这些绘图 ...

  10. python基础之数据类型/字符串/元组/列表/字典

    Python 数据类型 数字类型: int整型,long 长整型(在python3.0里不区分整型和长整型).float浮点型:complex复数(python中存在小数字池:-5--257):布尔值 ...