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. Kalman滤波器原理和实现

    Kalman滤波器原理和实现 kalman filter Kalman滤波器的直观理解[1] 假设我们要测量一个房间下一刻钟的温度.据经验判断,房间内的温度不可能短时大幅度变化,也就是说可以依经验认为 ...

  2. 【Oracle】ORA-00257:archiver error. Connect internal only, until freed 错误的处理方法

    archive log 日志已满ORA-00257: archiver error. Connect internal only, until freed 错误的处理方法 1. 用sys用户登录  s ...

  3. 给Nginx配置一个自签名的SSL证书

    转自廖雪峰的官方网站http://www.liaoxuefeng.com/ 要保证Web浏览器到服务器的安全连接,HTTPS几乎是唯一选择.HTTPS其实就是HTTP over SSL,也就是让HTT ...

  4. [转]redis-cluster研究和使用--待研究

    转自:http://hot66hot.iteye.com/blog/2050676 一:关于redis cluster 1:redis cluster的现状 reids-cluster计划在redis ...

  5. jsp 表单提交,服务器跳转方法 浏览器重定向 及 servlet映射时 路径问题

    在jsp页面中,等提交表单数据时,最好用觉得路径. 写法如下: <form action ="<%=request.getContextPath()%>/do_login. ...

  6. Android 蓝牙4.0 BLE

    Android ble (Bluetooth Low Energy) 蓝牙4.0,也就是说API level >= 18,且支持蓝牙4.0的手机才可以使用. BLE是蓝牙4.0的核心Profil ...

  7. Codeforces Round #216 (Div. 2)A. Valera and Plates

    #include <iostream> using namespace std; int main(){ int n, m , k; cin >> n >> m & ...

  8. [深入浅出Windows 10]实现饼图控件

    13.2 实现饼图控件 上一小节讲解了动态生成折线图和区域图,对于简单的图形这样通过C#代码来生成的方式是很方便的,但是当我们的图表要实现更加复杂的逻辑的时候,这种动态生成的方式就显得力不从心了,那就 ...

  9. Android -- TextView、button方法详解(2)

    1. button按下状态的改变 Button bt1 = null; // 声明按钮对象 bt1 = (Button) findViewById(R.id.button1); // 获取按钮对象 b ...

  10. arrays.xml文件中添加drawable数组的问题

    一.问题描述 今天遇到一个需求,将java中的数组搬进arrays.xml文件中 R.drawable.menu_share_pic_item, R.drawable.menu_share_wecha ...