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. Codeforces 235 E Number Challenge

    Discription Let's denote d(n) as the number of divisors of a positive integer n. You are given three ...

  2. Play框架的用户验证。

    最近刚刚参与一个基于Play框架的管理平台的升级工作,其中涉及到了用户的验证工作.第一次接触play框架,直接看已有代码,有点晕.因此,自己实现了一个简单的用户验证功能. 首先,新建一个User类,包 ...

  3. 用Redis存储Tomcat集群的Session(转载)

    本文转自http://blog.csdn.net/chszs/article/details/42610365 感谢作者 前段时间,我花了不少时间来寻求一种方法,把新开发的代码推送到到生产系统中部署, ...

  4. Android开发者选项——Gpu呈现模式分析

    对于Android用户来说,无论你用的什么品牌的手机,在开发者选项中都能发现“玄学曲线”的开关,之所以称其为玄学曲线,还是因为它被很多网友用于测试一个说不清道不明的东西——流畅度.到底多流畅才叫流畅, ...

  5. SharpSSH

    SharpSSH sharpssh is a pure .NET implementation of the SSH2 client protocol suite. It provides an AP ...

  6. ZooKeeper 授权验证

    ZooKeeper 授权验证 学习了:https://blog.csdn.net/liuyuehu/article/details/52121755 zookeeper可以进行认证授权:

  7. FFmpeg for ios架构：中级

    FFmpeg这部分想了非常久,也没找到比較好的解说方式.本来想像其他博客一样.对着代码一行行的分析.但后来感觉不太现实,FFmpeg应用在IOS上怎么说代码最少也有个5.6k行(包含音视频.业务逻辑) ...

  8. 2.nginx整合PHP

    /usr/local/src/下都有什么:.tar.gz文件和解压之后的源码 /usr/local/下都有什么:源码编译之后的东西 安装mysql客户端 安装mysql服务端 启动mysql服务端 s ...

  9. MySQL 压缩解决方案

    From:https://www.qcloud.com/community/article/876100 导语 描述 MySQL 压缩的使用场景和解决方案,包括压缩传输协议.压缩列解决方案和压缩表解决 ...

  10. FFmpeg编码详细流程

    FFmpeg在编码一个视频的时候的函数调用流程.为了保证结构清晰,其中仅列出了最关键的函数,剔除了其它不是特别重要的函数. 函数背景色 函数在图中以方框的形式表现出来.不同的背景色标志了该函数不同的作 ...