资料来源：网上资料整理并自行改编测试。复制以下代码并依赖jquery.js，jquery.validate.js即可执行。有误之处，请@我啊，敬请赐教。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jQuery extend() & jQuery.fn.extend()</title>

 <script src="../../scripts/jquery.js" type="text/javascript"></script>

 <script src="lib/jquery.validate.js" type="text/javascript"></script>

 <script type="text/javascript">

 $(document).ready(function() {

 　　function log(){

 　　　　console.log(arguments[0]);

 　　}

 　　//jQuery实现log

 　　jQuery.extend({

 　　　　log:function(){log(arguments[0])}

 　　});

 18　　 $.log("A test to console.log something by jQuery.extend!");

 　　var result=null;

 　　log("======================== test1 ========================");

 　　//jQuery.extend函数，简单理解，就是合并对象,把后面的合入前面的。如下例：

 　　result = $.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"});

 　　log(result); //得到结果：Object {name: "Jerry", age: 21, sex: "Boy"}

 　　log("======================== test2 ========================");

 　　result=$.extend({name:"Tom",age:21},{name:"Jerry",sex:"Boy"});

 　　log(result);    //得到结果同上

 　　log("======================== test3 ========================");

 　　var jack = {name:"Jack",age:21};

 　　var jane = {name:"Jane",sex:"girl",birthday:'2015-01-01'};

 　　result=$.extend(result,jack,jane);

 　　log(result);    //得到结果：Object {name: "jane", age: 21, sex: "gitl", birthday: "2015-01-01"}

 　　log("======================== test4 ========================");

 　　//Jquery.extend函数重载原型：  extend(boolean,dest,src1,src2,src3...)

 　　//第一个参数boolean代表是否进行深度拷贝，其余参数同上。（重写并且继承自己对象没有的参数）

 　　//深层拷贝，例子：

 　　result=$.extend(

 　　　　　　　　true,

 　　　　　　　　{},

 　　　　　　　　{ name: "John", location: {state: "Alaska",county:"USA"} },

 44 　　　　　　　　{ name: "Jack", location: {city: "Beijing",county:"China"}}

 　　);

 　　log(result);    //得到结果：Object {name: "Jack", location: {city: "Beijing",county: "China",state: "Alaska"}}

 　　log("======================== test5 ========================");

 　　//浅拷贝就是（重写但不继承自己子对象没有的参数），例子：

 　　result=$.extend(

 　　　　　　　　false,

 　　　　　　　　{},

 　　　　　　　　{ name: "John", location: {state: "Alaska",county:"USA"} },

 54　　　　　　　　 { name: "Jack", location: {city: "Beijing",county:"China"} }

 　　);

 　　log(result);    //得到结果：Object {name: "Jack", location: {city: "Beijing",county: "China"}}

 　　log("======================== test6 ========================");

 　　result=$.extend(

 　　　　　　　　false,

 　　　　　　　　{},

 　　　　　　　　{ name: "John", location: {state: "Alaska",county:"USA"} },

 63　　　　　　　　 { name: "Jack",location:{}}

 64　　 );

 　　log(result);    //得到结果：Object {name: "Jack", location: {city: "Beijing",county: "China"}}

 　　log("======================== test7 ========================");

 　　//jQuery对象下创建一个子对象，

 　　jQuery.extend({

 　　　　　　　　yourName:'ming',

 　　　　　　　　age:12,

 　　　　　　　　sex:'boy'

 　　});

 　　log($.yourName);// 'Ming'

 　　log($.age); // 12

 　　log($.sex); // 'boy'   

 　　log("======================== test8 ========================");

 　　//这个子对象名其实就是在jQuery全局对象中扩展一个myPlugin的命名空间，

 　　//其主要作用是把前面的jQuery对象创建的全局函数都封闭在这个子对象里面，避免jQuery对象的全局函数中发生命名空间的冲突。

 　　//这样，其实就是我们创建的一个插件的名字

 　　jQuery.myPlugin = {

 　　　　　　　　yourName:'ming',

 　　　　　　　　age:12,

 　　　　　　　　sex:'boy',

 　　　　　　　　foo:function(){log('abc')},

 　　　　　　　　bar:function(){log(123)}

     };

 　　log($.myPlugin.yourName);// 'Ming'

 　　log($.myPlugin.age);// 12

 　　log($.myPlugin.sex);// 'boy'

 　　$.myPlugin.foo();// 'abc'

 　　$.myPlugin.bar();// 123

 　　log("======================== test9 ========================");

 　　//用jQuery.extend()这样改写上面的代码：

 　　jQuery.extend({

 　　　　　　　　myPlugin:{

 　　　　　　　　　　foo:function(){log('abc')} ,

 　　　　　　　　　　bar:function(){log(123)} ,

 　　　　　　　　　　yourName:'ming',

 　　　　　　　　　　age:12 ,

 　　　　　　　　　　sex:'boy'

 　　　　　　　　}

         }

     );

 　　log($.myPlugin.yourName);// 'Ming'

 　　log($.myPlugin.age);// 12

 　　log($.myPlugin.sex);// 'boy'

 　　$.myPlugin.foo();// 'abc'

 　　$.myPlugin.bar();// 123

 　　log("======================== test10 ========================");

 　　//我们还可以在上面的基础上，再用jQuery.extend(target,obj)对myPlugin对象（即插件）进一步扩展：

 　　var temp = {

 　　　　hello:function(){return 'hello';}

 　　};

 　　jQuery.extend($.myPlugin , temp);

 　　log($.myPlugin.hello());// 'hello'

 　　log("======================== test11 ========================");

 　　//或者修改myPlugin映射中的名-值对：

 　　jQuery.extend($.myPlugin , {sex:'2'} );//后面的映射参数会覆盖前面myPlugin的映射

 　　log($.myPlugin.sex);// '2'  

 　　log("======================== test12 ========================");

 　　//jQuery.extend和jQuery.fn.extend的区别

 　　//我们先把jQuery看成了一个类，这样好理解一些。

 　　//jQuery.extend()，是扩展的jQuery这个类。

 　　//假设我们把jQuery这个类看成是人类，能吃饭能喝水能跑能跳，现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。

 　　//这样的话，不论是男人，女人，xx人.....等能继承这个技能（方法）了。

 　　//就像上面写的那样：

 　　jQuery.extend({

 　　　　log:function(){console.log(arguments[0]);}

 　　});

 　　$.log("这样就能打印出来这个字符串");//这样(控制台F12)就能打印出来这个字符串

 　　log("======================== test13 ========================");

 　　//这说明啥啊，这说明$.log变成了jQuery这个类本身的方法（object）嘛。他现在能”唱歌“了。

 　　//但是吧，这个能力啊，只有代表全人类的 jQuery 这个类本身，才能用啊。你个人想用，你张三李四王五麻六，你个小草民能代表全人类嘛？

 　　//所以啊，这个扩展也就是所谓的静态方法。只跟这个类本身有关。跟你具体的实例化对象是没关系滴。

 　　//我们再看看jQuery.fn.extend()这个方法。

 　　//从字面理解嘛，这个拓展的是jQuery.fn的方法。

 　　//jQuery.fn是啥玩意呢？

 　　//源码如下：

 　　//jQuery.fn = jQuery.propotype = {

 　　//　　init:function(){}

 　　// ...

 　　//}

 　　//哦，原来jQuery.fn=jQuery.prototype，就是原型啊。

 　　//那就一目了然了，jQuery.fn.extend拓展的是jQuery对象（原型的）的方法啊！

 　　//对象是啥？就是类的实例化嘛，例如

 　　//$("#abc")

 　　//这个玩意就是一个实例化的jQuery对象嘛。

 　　//那就是说，jQuery.fn.extend拓展的方法，你得用在jQuery对象上面才行啊！他得是张三李四王五痳六这些实例化的对象才能用啊。

 　　//说白了就是得这么用（假设xyz()是jQuery.fn.extend()拓展的方法）：

 　　//$('selector').xyz();

 　　//你要是这么用$.xyz()；是会出错误滴。如：

 　　jQuery.fn.extend({

 　　　　display:function(){

 　　　　　　$(this).css("display","block");

 　　　　}

 　　});

 　　try{

166　　 　　$.display();

 　　}catch(err){

 　　　　$.log("请亲进入debug模式，设置断点后看效果哈");

 　　　　$.log(err);

 　　　　$("#abc").html("亲，能看到我了吧");

 　　　　//$("#abc").display();//注释下看效果也可以哈

 　　}

 　　//jQuery.fn.extend()和上边的jQuery.extend()区别区别一目了然吧？

 　　//其实吧，jQuery.extend()这个方法，主要是用来拓展个全局函数啦，例如$.ajax()这种，要不就是拓展个选择器啦，例如$.fn.each()，当选择器用。

 　　//大部分插件都是用jQuery.fn.extend()。

 });

 </script>

 </head>

 <body>

 <p id="abc" style="display:none">亲，看不到我吧</p>

 </body>

 </html>

jQuery extend() & jQuery.fn.extend()，插件编写的更多相关文章

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

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

  2. jQuery中，$.extend，$obj.extend和$.fn.extend三者的区别

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

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

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

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

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

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

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

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

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

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

  9. jQuery插件的开发之$.extend(),与$.fn.extend()

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

  10. 利用jQuery对插件进行扩展时，方法$.extend()、$.fn.extend()区别与联系

      利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...

随机推荐

  1. 磁盘空间已满导致rabbitmq无法启动

    rabbitmq-server 启动问题 今天遇到一个挺奇怪的 rabbitmq-server 的启动问题. 在内部使用的 openstack 环境上,rabbitmq-server突然就关掉了,无法 ...

  2. 利用Axis2默认口令安全漏洞可入侵WebService网站

    利用Axis2默认口令安全漏洞可入侵WebService网站 近期,在乌云上关注了几则利用Axis2默认口令进行渗透测试的案例,大家的渗透思路基本一致,利用的技术工具也大致相同,我在总结这几则案例的基 ...

  3. Java基础——数组应用之字符串String类

    字符串String的使用 Java字符串就是Unicode字符序列,例如串“Java”就是4个Unicode字符J,a,v,a组成的. Java中没有内置的字符串类型,而是在标准Java类库中提供了一 ...

  4. 汉字拼音带声调和发音mp3文件(C#源程序)

    7800多个汉字的拼音带声调以及全部mp3读音文件,附带一个C#实例程序源代码 读音文件按拼音和声调命名,方便调用 获取全部源代码

  5. ios-XML文档解析之SAX解析

    首先SAX解析xml *xml文档的格式特点是节点,大体思路是把每个最小的子节点作为对象的属性,每个最小子节点的'父'节点作为对象,将节点转化为对象,输出. 每个节点都是成对存在的,有开始有结束.有始 ...

  6. 算法-KMP串匹配

    字符串匹配 http://www.cnblogs.com/jingmoxukong/p/4343770.html 模式匹配是数据结构中字符串的一种基本运算,给定一个子串,要求在某个字符串中找出与该子串 ...

  7. 背包九讲 附：USACO中的背包问题

    附:USACO中的背包问题 USACO是USA Computing Olympiad的简称,它组织了很多面向全球的计算机竞赛活动. USACO Trainng是一个很适合初学者的题库,我认为它的特色是 ...

  8. C++动态内存分配

    C++动态内存分配1.堆内存分配 :C/C++定义了4个内存区间:代码区,全局变量与静态变量区,局部变量区即栈区,动态存储区,即堆(heap)区或自由存储区(free store). 堆的概念:通常定 ...

  9. Java基础(55):Exception类详解（转）

    Java中的异常 Exception java.lang.Exception类是Java中所有异常的直接或间接父类.即Exception类是所有异常的根类. 比如程序: public class Ex ...

  10. Java编程思想（一）：大杂烩

    在java中一切都被视为对象.尽管一切都是对象,但是操纵的标识符实际上是对象的一个引用,可以将引用想象成是遥控器(引用)来操纵电视机(对象).没有电视机,遥控器也可以单独存在,即引用可以独立存在,并不 ...