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. volicity 模板类,java操作配置文件

    import java.io.StringWriter; import java.util.HashSet; import java.util.Iterator; import java.util.M ...

  2. Mac OS Storm+Kafka+Zookeeper配置

    先补充一个前两天mac配置的文档. 首先确定由jdk scala环境 JAVA_HOME=/System/Library/Frameworks/JavaVM.framework/Versions/Cu ...

  3. 关于storm的Spout、Bolt、及其可靠性

    本文导读: Component全家谱结构图 Spout分析 ——类图 ——分析(接口实现).结论 ——可靠的与不可靠的消息(推荐) Bolt分析  ——类图 ——分析(接口实现).结论 ——可靠的与不 ...

  4. [Sdoi2014]旅行 题解

    题目大意: 给出一个n个点的数,和m次操作.每个点有颜色和权值. 每次操作分4种 1:修改一个点的颜色 2:修改一个点的权值 3:询问从x到y的路径上,和x相同颜色的点的权值和(保证x,y同颜色) 4 ...

  5. ACM: HDU 2563 统计问题-DFS+打表

    HDU 2563 统计问题 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u HDU 2 ...

  6. NOIp 2013 #2 花匠 Label:爆0的Water

    题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定 把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希 望剩下的花排列得比较别致. 具 ...

  7. implicit和explicit的基本使用

    class MyAge { public int Age { get; set; } public static implicit operator MyAge(int age) { return n ...

  8. osg中遇到的问题

    osg中遇到的问题 今天写程序的时候, 需要把键盘和鼠标消息转发出来, 就直接写了接口用signal丢出来了. 程序写的很多, 测试的时候却崩溃了.... 在场景中拖拽鼠标左键的时候, 会发现在扔出鼠 ...

  9. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  10. Android事件处理

    含义:为用户动作提供响应就是事件处理. Android提供了强大的事件处理机制:基于监听的事件处理.基于回调的事件处理. 一.基于监听的事件处理 监听的处理模型主要涉及三类对象 >Event S ...