jquery之extend
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的更多相关文章
- jquery.fn.extend与jquery.extend--（初体验二）
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery的extend方法
jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({}) ,为jQuery类添加方法,可以理解为扩 ...
- jQuery.extend和jQuery.fn.extend的区别【转】
解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...
- jQuery原生框架中的jQuery.fn.extend和jQuery.extend
extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...
- 理解jquery的$.extend()、$.fn和$.fn.extend()
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- 解读jQuery中extend函数
$.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); ...
- jQuery的extend方法的深层拷贝
一些东西长时间不用就忘了,比如这个jQuery的extend方法的深层拷贝,今天看单页应用的书的时候,看到entend第一个参数是true,都蒙了.也是,自己的大部分对jQuery的学习知识来自锋利的 ...
- jQuery.fn.extend(object) object中this的指向
看到下面的代码后,一下子懵逼了.这个this指向哪儿去了. jQuery.fn.extend({ check: function() { return this.each(function() { t ...
- jQuery中$.extend
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...
随机推荐
- Silverlight 离线安装包
直接下载地址 https://www.microsoft.com/getsilverlight/locale/en-us/html/Microsoft%20Silverlight%20Release% ...
- android -- 存储byte
public static String byteArrayToHexStr(byte[] byteArray) { if (byteArray == null){ return null; } ch ...
- SilverLight：布局（3）StackPanel 对象
ylbtech-SilverLight-Layout: 布局(3)StackPanel 对象 A, Nesting Layout Containers(内嵌布局容器) B, StackPanel(队列 ...
- Tensorflow 之 TensorBoard可视化Graph和Embeddings
windows下使用tensorboard tensorflow 官网上的例子程序都是针对Linux下的:文件路径需要更改 tensorflow1.1和1.3的启动方式不一样 :参考:Running ...
- iphone越狱-------平刷回越狱前（未越狱）状态
众所周知,iPhone采用了沙盒机制,应用之间不能任意的访问,所以很多机友在拿到iPhone后,往往选择进行越狱,但是有时候,越狱的手机有的时候在安全.性能.流畅性等方面表现并不如意,所以只好寻求重新 ...
- TCP三次握手与DDOS攻击原理
TCP三次握手与DDOS攻击原理 作者:冰盾防火墙 网站:www.bingdun.com 日期:2014-12-09 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接. ...
- HashSet中存方用户自己定义数据类型数据，重写equals方法和hashCode方法
import java.util.Set; import java.util.HashSet; public class SetTest { public static void main(Strin ...
- Solaris 系统启动与关闭
忘掉root密码 更改内核参数后,重启进不了系统 复制---进入单用户模式----恢复文件 系统突然死机,如何尽量减少数据丢失 Sync 同步命令.将内存内容输入到硬盘,相当于保存文档. Unix ...
- nvidia-docker_1.0.1-1_amd64.deb 百度云下载分享
nvidia-docker_1.0.1-1_amd64.deb 链接: https://pan.baidu.com/s/1i5pHFNZ 密码: xjui
- 下载与安装---tensorflow on linux
http://wiki.jikexueyuan.com/project/tensorflow-zh/get_started/os_setup.html 你可以使用我们提供的 Pip, Docker, ...