jquery的extend方法的用法
1. [代码][JavaScript]代码     
01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
02"http://www.w3.org/TR/html4/strict.dtd">
03<html xmlns="http://www.w3.org/1999/xhtml">
04    <head>
05        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
06        <title>jquery继承</title>
07    </head>
08    <body>
09        <p>对象继承{name:"ws",age:"23"}<={name:"king",sex:"man"}
10            <p type="text" id="parent1"></p>
11            <input type="button" value="extend" id="btn1">
12        <p>
13        <p>全局方法继承$.hello()
14            <input type="button" value="触发" id="btn3">
15        <p>
16        <p>类插件方法触发
17            <br/>name:<input type="text"  id="name">
18            <br/>age:<input type="text"  id="age">
19            <input type="button" value="触发" id="btn4">
20        <p>
21        <p>
22            深度拷贝{name:"ws",location:{city:"ningbo",code:"315000",locOther="other"},other:"第一岑对象中的参数"}<={name:"king",location:{city:"shaoxin",code:"311824"}}
23            <p id="p5"></p>
24            <p id="p6"></p>
25            <input type="button" value="深度拷贝触发" id="btn5">
26            <input type="button" value="非深度拷贝触发" id="btn6">
27        </p>
28    </body>
29    <script type="text/javascript" src="jquery-1.8.2.js"></script>
30    <script>
31        $(function(){
32             
33            /*对象继承*/
34            $("#btn1").click(function(){
35                var result = $.extend({},{name:"ws",age:"23"},{name:"king",sex:"man"});
36                $("#parent1").html("name:"+result.name+"--"+"age:"+result.age+"--"+"sex:"+result.sex);
37            });
38             
39            /*方法继承*/
40            $.extend({hello:function(){
41                alert("全局方法");
42            }
43            });
44             
45            /*fn插件方法*/
46            $.fn.extend({fnmethod:function(){
47                $(this).click(function(){
48                    alert($(this).val());
49                })
50            }});
51            $("#name").fnmethod();
52             
53            /*全局jquery方法*/
54            function hello(){
55                alert("子方法");
56            }
57            $("#btn3").click(function(){
58                $.hello();
59            });
60             
61            /*类插件方法触发*/
62            $("#btn4").click(function(){
63                $.ws.printInfo({
64                    name:$("#name").val(),
65                    age:$("#age").val()
66                })
67            });
68             
69            /*深度拷贝*/
70            $("#btn5").click(function(){
71                var result = $.extend(true,{},{name:"ws",location:{city:"ningbo",code:"315000",locOther:"other"},other:"第一岑对象中的参数"},{name:"king",location:{city:"shaoxin",code:"311824"}});
72               $("#p5").html("name:"+result.name+"--city:"+result.location.city+"--code:"+result.location.code+"--<b>locOther:"+result.location.locOther+"</b>--<b>other:"+result.other+"</b>");
73            });
74           $("#btn6").click(function(){
75               var result1 = $.extend({},{name:"ws",location:{city:"ningbo",code:"315000",locOther:"other"},other:"第一岑对象中的参数"},{name:"king",location:{city:"shaoxin",code:"311824"}});
76                $("#p6").html("name:"+result1.name+"--city:"+result1.location.city+"--code:"+result1.location.code+"--<b>locOther:"+result1.location.locOther+"</b>--<b>other:"+result1.other+"</b>");
77            });
78             
79             
80        });
81         
82        /**类插件方法触发*/
83        (function ($) {
84            $.ws={
85                op:{
86                    name:"ws",
87                    age:20,
88                    other:"other param"
89                },
90                printInfo:function(newop){
91                    var op_ = $.extend({},this.op,newop);
92                    console.info("name:"+op_.name);
93                    console.info("age:"+op_.age);
94                    console.info("sex:"+op_.other);
95                }
96            }
97        })(jQuery);
98    </script>
99</html>
2. [代码]说明     
view sourceprint?
01Jquery的扩展方法extend是我们在写插件的过程中常用的方法
02 http://www.huiyi8.com/moban/
03模型：extend(dest,src1,src2,src3...);  解释：将src1,src2,src3...合并到dest中,返回值为合并后的dest
04 
051. 全局方法
06为扩展jQuery类本身.为类添加新的方法
07以理解为添加静态方法
08$.extend({
09  hello:function(){alert('hello');}
10});
11如何调用：$.hello(), 它将覆盖其他子的hello()方法
12 
132.jquery的实例对象方法
14（给jQuery对象添加方法）如：点击任何Dom对象弹出它的value
15$.fn.extend({fnmethod:function(){
16 $(this).click(function(){
17   alert($(this).val());
18 })
19}});
20 
213.关于深度拷贝
22深度拷贝   
23var result=$.extend( true,  {},  {name:"ws",other:{x:xvalue,y:yvalue}},{name:"ws",other:{x:xx}}}  
24=> {name:"ws",other:{x:xx,y:yvalue}}
25 
26非深度拷贝 
27var result=$.extend( false,  {},  {name:"ws",other:{x:xvalue,y:yvalue}},{name:"ws",other:{x:xx}}}  
28=> {name:"ws",other:{x:xx}}网站模板
29区别就是深度拷贝会把对象中的对象的所有属性都拷贝过来 ，而非深度拷贝则不会
30个人理解：可以吧对象理解为一个json对象，jquery的extend会继承所有对象中的顶层属性，而如果需要再继承对象属性中的属性，那么需要用到深度继承
31jquery默认的拷贝方式是非深度拷贝

jquery之extend的更多相关文章

  1. jquery.fn.extend与jquery.extend--（初体验二）

    1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...

  2. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

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

  3. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  4. jQuery.extend和jQuery.fn.extend的区别【转】

    解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...

  5. jQuery原生框架中的jQuery.fn.extend和jQuery.extend

    extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...

  6. 理解jquery的$.extend()、$.fn和$.fn.extend()

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

  7. 解读jQuery中extend函数

    $.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); ...

  8. jQuery的extend方法的深层拷贝

    一些东西长时间不用就忘了,比如这个jQuery的extend方法的深层拷贝,今天看单页应用的书的时候,看到entend第一个参数是true,都蒙了.也是,自己的大部分对jQuery的学习知识来自锋利的 ...

  9. jQuery.fn.extend(object) object中this的指向

    看到下面的代码后,一下子懵逼了.这个this指向哪儿去了. jQuery.fn.extend({ check: function() { return this.each(function() { t ...

  10. jQuery中$.extend

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...

随机推荐

  1. Concurrency and Application Design (三)

    Operation Queues operation object是 NSOperation class实例用来封装想要执行的任务.nsoperation class是抽象类必须子类化. NSInvo ...

  2. Android中使用SDcard进行文件的读取

    来自:http://www.cnblogs.com/greatverve/archive/2012/01/13/android-SDcard.html 平时我们需要在手机上面存储想音频,视频等等的大文 ...

  3. Android应用开发之所有动画使用详解

    题外话:有段时间没有更新博客了,这篇文章也是之前写了一半一直放在草稿箱,今天抽空把剩余的补上的.消失的这段时间真的好忙,节奏一下子有些适应不过来,早晨七点四十就得醒来,晚上九点四十才准备下班,好像最近 ...

  4. ffmpeg一些filter使用方法、以及一些功能命令

    1.加字幕 命令:ffmpeg -i <input> -filter_complex subtitles=filename=<SubtitleName>-y <outpu ...

  5. 初涉IPC，了解AIDL的工作原理及用法

    初涉IPC,了解AIDL的工作原理及用法 今天来讲讲AIDL.这个神奇的AIDL,也是近期在学习的,看了某课大神的解说写下的blog,希望结合自己的看法给各位同价通俗易懂的解说 官方文档:http:/ ...

  6. Odoo 养猪

    阶段 仔猪养成为肉猪 乳猪养成为仔猪 母猪繁殖乳猪     每一个饲养阶段,基本上在同一组笼舍,活动场所:进入到下一饲养阶段才会转换笼舍.在每一个饲养阶段,基本上经历以下过程 饲养 注射疫苗 饲养 投 ...

  7. 获取css信息

    一般情况是用style直接获取css信息但是style只能获取到卸载行内的样式外链的和嵌入的样式会获取不到 2.5 用下面方法获取外链和嵌入的css样式 这种方法只能用于读取 window.getCo ...

  8. c# vitural

    virtual关键字用于指定属性或方法在派生类中重写. 默认情况下,派生类类从其基类继承属性和方法,如果继承的属性或方法需要在派生类中有不同的行为,则可以重写它,即可以在派生类中定义该属性或方法的新实 ...

  9. CSDN - 进程结束后new出的内存会回收吗？

    http://blog.csdn.net/stanjiang2010/article/details/5386647     关键词:内存回收  

  10. mysql 控制台环境下查询中文数据乱码，插入、更新中文数据不成功

    mysql 控制台环境下查询中文数据乱码,插入.更新中文数据不成功         登录mysql密码是加入编码参数--default-character-set,中文用gbk mysql -uroo ...