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. kafka技术分享01--------why we study kafka？

    kafka技术分享01--------why we study kafka? ​ 作为一名大数据工程师,我们所面对的大多数是数据密集型的应用,而非计算密集型的应用.对于数据密集型的应用,如何解决数据激 ...

  2. DevExpress右键菜单使用 z

    添加BarManager和popupMenu组建: 设置popupMenu组件的Manager属性: 右键点击popupMenu主键,点击Customize选项添加菜单:    然后便可添加到鼠标事件 ...

  3. iOS开发 编码规范

    转至   http://www.cnblogs.com/celestial/archive/2012/06/30/2571417.html 编码规范 一.文档结构管理 1.建立Libraries文件夹 ...

  4. C＃文件路径操作总结【转】

    http://www.cnblogs.com/zhoufoxcn/archive/2006/10/24/2515874.html 一.获取当前文件的路径 1.   System.Diagnostics ...

  5. 现代数字信号处理——AR模型

    1. AR模型概念观       AR模型是一种线性预测,即已知N个数据,可由模型推出第N点前面或后面的数据(设推出P点),所以其本质类似于插值,其目的都是为了增加有效数据,只是AR模型是由N点递推, ...

  6. hdu5373

    题先附上:水题,可是思路不正确,特easy超时(TLE) The shortest problem Time Limit: 3000/1500 MS (Java/Others)    Memory L ...

  7. sql分级汇总

    --測试数据 create table tb([DB-ID] varchar(10),ENTITY varchar(10),DATE varchar(10),[CUST-NO] int,AMOUNT ...

  8. request 发送多层字典

    a. 客户端向服务端发送多层字典的值 #客户端发送 obj = { 'data':{ "k1":"v1", "k2":"v2&qu ...

  9. CrtmpServer getApplication注册流程

    最近在研究 CrtmpServer getApplication注册流程,以备查阅 图1. 加载动态库流程 图2配置application流程

  10. JavaScript 日期格式化 简单有用

    JavaScript 日期格式化 简单有用 代码例如以下,引入jquery后直接后增加下面代码刷新可測试 Date.prototype.Format = function (fmt) { //auth ...