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

jQuery.fn.extend();

jQuery.extend();

(1)类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object); 

为jQuery类添加类方法,可以理解为添加静态方法。

如: jQuery.extend({

min: function(a, b) { return a < b ? a : b; },

max: function(a, b) { return a > b ? a : b; }

});

jQuery.min(2,3); // 2

jQuery.max(4,5); // 5

ObjectjQuery.extend( target, object1, [objectN])用一个或多个其他对象来扩展一个对象,返回被扩展的对象

var settings = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };

jQuery.extend(settings, options);

结果:settings == { validate: true, limit: 5, name: "bar" }

(2)对象级别 对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...); 这里这个changeColor呢,就是基于对象的拓展了。 jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。

jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

$.fn.extend({

alertWhileClick:function() {

$(this).click(function(){

alert($(this).val());

});

}

});

$("#input1").alertWhileClick(); // 页面上为: $("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

(3)扩展

$.xy = {

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

minus:function(a,b){return a-b;},

voidMethod:function(){ alert("void"); }

};

var i = $.xy.add(3,2);

var m = $.xy.minus(3,2);

$.xy.voidMethod();

jquery的$.extend和$.fn.extend作用及区别的更多相关文章

  1. jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  2. jQuery开发自定义插件 $.extend()与$.fn.extend()

    jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...

  3. 理解jQuery的$.extend与$.fn.extend

    https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...

  4. jQuery插件开发中$.extend和$.fn.extend辨析

    jQuery插件开发分为两种:   1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...

  5. $.fn与$.fx什么意思; $.extend与$.fn.extend用法区别; $(function(){})和(function(){})(jQuery)

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

  6. $.extend()和$.fn.extend()用法和区别

    $.extend()和$.fn.extend()用法和区别: 在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区 ...

  7. $.extend(),与$.fn.extend() 讲解

    $.extend(),与$.fn.extend() 讲解(一) (2013-07-11 10:24:31) 转载▼ 转自:http://blog.sina.com.cn/s/blog_a3bd3bd0 ...

  8. 插件的理解$.extend()与$.fn.extend()

    插件的理解.$.extend()与$.fn.extend()    插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.exte ...

  9. jquery的$.extend、$.fn.extend、 jQuery.extend( target, object1, [objectN])作用及区别

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. ...

  10. jQuery - jQuery的$.extend和$.fn.extend作用及区别

    jQuery为开发插件提拱了两个方法,分别是: 1. jQuery.fn.extend(); 2. jQuery.extend(); 虽然 javascript没有明确的类的概念,但是可以构建类似类的 ...

随机推荐

  1. 第二个Sprint冲刺第三天

    讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 燃尽图: 待解决的问题: 需要将主界面重新布局,下面的是原始主界面: 想实现一个统计的功能,今天就完成了一个基本的布局: 开发感悟:爱在何方

  2. CMAKE语法

    [语法] 注释  # :       #我是注释 命令语法 COMMAND:    COMMAND(参数1 参数2 ...) 字符串列 A;B;C           //分号分割或空格分隔的值 变量 ...

  3. Exploratory Software Testing

    最近找到去年上半年看过一本关于测试方面书籍的总结笔记,一直放在我的个人U盘里,当时是用Xmind记录的,现在重新整理下分享给大家了! James A.Whittaker [美] 詹姆斯·惠特克(软件测 ...

  4. 用无线网络进行Android开发中的调试

    1.手机具有root权限 2.安装adbWireless1.5.4.apk (下面有下载地址) 3.敲入命令:adb connect 192.168.1.127  后面是手机的IP地址 打开eclip ...

  5. clientX,screenX,pageX,offsetX的异同 【转载】

    首先说明一下以上对象都是指javascript中的,不包含其他语言. pageX/pageY: 鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000 ...

  6. 用jquery ,当改变窗口或屏幕大小时调用function,用哪个事件?

    $(window).resize(function(){ //process here}); window的onresize事件. $(window).resize(function () {     ...

  7. C++ Primer : 第十三章 : 拷贝控制之拷贝、赋值与销毁

    拷贝构造函数 一个构造函数的第一个参数是自身类类型的引用,额外的参数(如果有)都有默认值,那么这个构造函数是拷贝构造函数.拷贝构造函数的第一个参数必须是一个引用类型. 合成的拷贝构造函数   在我们没 ...

  8. 《C标准库》——之<stddef.h>

    <stddef.h>,顾名思义,就是标准定义.C语言里这个标准库里定义了一些类型,和宏定义. <stddef.h>的内容: 类型: ptrdiff_t : 是两个指针相减的结果 ...

  9. 输入DStream和Receiver详解

    输入DStream代表了来自数据源的输入数据流.在之前的wordcount例子中,lines就是一个输入DStream(JavaReceiverInputDStream),代表了从netcat(nc) ...

  10. meta name="viewport" 属性详解

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...