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方法,那么后面你的每一个 ...
随机推荐
- 布斯（Steve Jobs）在斯坦福大学的演讲稿，中英文对照版
2005年6月14日,苹果CEO史蒂夫·乔布斯(Steve Jobs)在他的母校斯坦福大学的毕业典礼发表了著名的演讲,关于这段演讲,你会看到N多人的推荐(比如同样喜欢在大学演讲的李开复先生).此前曾经 ...
- DELPHI是怎么实现跨平台的？
DELPHI是怎么实现跨平台的? 首先跨平台必须要兼容原来的语法,以线程的临界区对象为例: TCriticalSection = class(TSynchroObject){$IFDEF POSIX} ...
- STL源代码剖析 容器 stl_deque.h
本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie deque ---------------------------------------- ...
- vue生命周期的栗子
vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html><html><head><me ...
- iOS UI08_TableView界面传值
实现两个界面之间内容的传递 // // MainViewController.m // UI08_TableView界面传值 // // Created by dllo on 15/8/7. // C ...
- 随想录（fatfs的学习）
[ 声明:版权全部,欢迎转载,请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 上学的时候就对文件系统非常有兴趣.可是苦于没有合适的fs代码能够学习.市面上的fs代码,要么太 ...
- 【LeetCode-面试算法经典-Java实现】【002-Add Two Numbers (单链表表示的两个数相加)】
[002-Add Two Numbers (单链表表示的两个数相加)] 原题 You are given two linked lists representing two non-negative ...
- C++获取站点的ip地址
#include "stdafx.h" #include <winsock2.h> #pragma comment (lib,"ws2_32.lib&q ...
- Vb.net/VB 声明API函数实现父窗口功能
回想第一次敲机房收费.自己调用了api函数实现了父窗口及其子窗口最小化的功能.现在再次遇到,自己就在思考,能不能继续使用API函数呢?答案当然是Of Course! 事实上细致看两者并没有多大的差别. ...
- 解决Android Studio下Element layer-list must be declared问题
近期将一个项目从Eclipse转到Android Studio. 项目中使用了环信demo中的一些xml资源,转换后发现color资源目录下诸如layer-list或者shape等标签报Element ...