jQuery 有两种方式封装代码 $.extend 和 $.fn.extend,我们也称为封装插件

$.extend DEMO

// 封装
$.extend({
  say:function(options){ // options 也可以是多个参数 a, b, c
    var name= options.name|| '';
    var words = options.words || '';
    document.write(name + ' say: ' + words);
  }
})

// 调用
$.say({ // options 是多个参数时,$.say(a, b, c);
  name:'Tom',
  words:'hello'
});
// 输出 Tom say: hello

$.fn.extend DEMO

<div id="man">man</div>
// 封装
$.fn.extend({
  talk:function(options){
    var defaults = {
        words:'something'
    }
    var opts = $.extend(defaults, options);
    var obj = $(this);
    obj.html(defaults.words);
  }
})

// 调用
$('#man').talk({ words:'hi' });

由此可见,$.extend 可以直接调用,$.fn.extend 需要基于对象来调用

jQuery extend 实现代码封装的更多相关文章

  1. jQuery插件开发jQuery.extend(object)和jQuery.fn.extend()

    jQuery插件开发 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可 ...

  2. 如何将Js代码封装成Jquery插件

    很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特 ...

  3. jQuery.extend和jQuery.fn.extend的区别?

    jquery 本身 是由 Resig: 莱希格, 一个美国的小伙子小伙伴开发的, 在2005年 prototype发表之后, 在2006年1月发表的, 后来进入mozilla工作, mozilla的j ...

  4. JQ插件jquery.fn.extend与jquery.extend

    jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend( ...

  5. jquery.fn.extend与jquery.extend(转)

    jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend( ...

  6. jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍

    这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...

  7. jQuery源码分析-03扩展工具函数jQuery.extend

    // 扩展工具函数 jQuery.extend({ // http://www.w3school.com.cn/jquery/core_noconflict.asp // 释放$的 jQuery 控制 ...

  8. jQuery extend 方法使用 (转)

    方法介绍 jQuery 的 API 手册中,extend 方法挂载在 jQuery 和 jQuery.fn 两个不同的对象上,但在 jQuery 内部代码实现的是相同的,只是功能各不相同. 先看看官方 ...

  9. jquery.fn.extend与jquery.extend用法与区别

    jQuery为开发插件提拱了两个方法,分别是:  代码如下 复制代码 jQuery.fn.extend(object);  和   jQuery.extend(object); jQuery.exte ...

随机推荐

  1. HDU4609 3-idiots(母函数 + FFT)

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=4609 Description King OMeGa catched three men wh ...

  2. java实现文件上传--flash上传

    1.http请求的头信息是“application/octet-stream”,request body 是二进制的flash图片流 2.把流中的信息读入到文件中 代码如下,代码分三个部分: ---- ...

  3. 【原】iOS学习18之OC内存管理高级

    1.属性的内存管理 1> 属性的语义特性 2> assign下的属性内部实现 @property (nonatomic, assign) NSString *name; @synthesi ...

  4. unity update 和fixedudpate

    但是Update会在每次渲 染新的一帧时被调用. 而FixedUpdate会在每个固定的时间间隔被调用,

  5. ccc animation

    cc.Class({ extends: cc.Component, properties: { sheepAnim: { default: null, type: cc.Animation } }, ...

  6. BZOJ1036[ZJOI2008]树的统计Count 题解

    题目大意: 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.有一些操作:1.把结点u的权值改为t:2.询问从点u到点v的路径上的节点的最大权值 3.询问从点u到点v的路径上的节点的权值和 ...

  7. ACM 一种排序

    一种排序 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数 ...

  8. ACM : Travel-并查集-最小生成树 + 离线-解题报告

    Travel Time Limit:1000MS     Memory Limit:131072KB     64bit IO Format:%I64d & %I64u /*题意 给出n[节点 ...

  9. box-sizing的相关属性

    box-sizing有三个属性,分别是:content-box,border-box,inherit (1)content-box:在宽度和高度之外绘制元素的内边距和边框(默认属性) (2)borde ...

  10. 【BZOJ3211&3038】花神游历各国&上帝造题的七分钟2(CodeVS)

    Description   Input   Output 每次x=1时,每行一个整数,表示这次旅行的开心度 Sample Input 4 1 100 5 5 5 1 1 2 2 1 2 1 1 2 2 ...