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. JavaWeb过滤器.监听器.拦截器-？原理&区别

    过滤器可以简单理解为“取你所想取”,忽视掉那些你不想要的东西:拦截器可以简单理解为“拒你所想拒”,关心你想要拒绝掉哪些东西,比如一个BBS论坛上拦截掉敏感词汇. 1.拦截器是基于java的反射机制,过 ...

  2. DELPHI的BPL使用

    了解BPL和DLL的关系将有助于我们更好地理解DELPHI在构件制作.运用和动态.静态编译的工作方式.对初学DELPHI但仍对DELPHI开发不甚清晰的朋友有一定帮助.第一部分:有关包的介绍 一般我们 ...

  3. 1、CRM2011编程实战——清空指定页签以下的全部选项，并对页签以下的指定控件进行操作

    需求:当页面载入时,"呼叫编号"保持不变,"任务号"自己主动更新."接报时间"和"发生日期"自己主动设置为当天日期和时间 ...

  4. PS 如何用制作键盘图标

    1 键盘可以大致分为笔记本键盘和台式机键盘,颜色一般是黑色或白色.不同的键盘,拍摄角度不同(俯视或者平视)得到的效果也不一样.一般我们根据自己需要得到需要的键盘形式.比如下面别人制作的一套立体键盘,立 ...

  5. 自己定义一个Dialog样式的Activity窗体，切换到Dialog的方法

    首先定义一个style 在style里面加入 <style name="MyDialog" parent="@android:Theme.Dialog"& ...

  6. Tessellation (曲面细分) Displacement Mapping (贴图置换)

    DirectX 11 Tessellation (曲面细分)-什么是 Tessellation (曲面细分) ? 它为什么可以起到如此关键的数据? 随着近期人们对 DirectX 11 的议论纷纷,你 ...

  7. [RFC] Simplifying kernel configuration for distro issues

    http://lwn.net/Articles/507276/ From: Linus Torvalds <torvalds-de/tnXTf+JLsfHDXvbKv3WD2FQJk+8+b-A ...

  8. AngularJs 常用

    Angularjs开发一些经验总结:http://www.cnblogs.com/whitewolf/archive/2013/03/24/2979344.html 七步从AngularJS菜鸟到专家 ...

  9. IDEA搭建Android wear开发环境，Android wear，I&#39;m comming！

    随着google公布了android wear这个东西.然后又有了三星的gear,LG的G watch以及moto 360,苹果由公布了apple watch.未来可能在智能手表行业又有一场战争. 当 ...

  10. angular ui $modal 使用 option

    $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示ht ...