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方法,那么后面你的每一个 ...
随机推荐
- Parameter Binding in ASP.NET Web API #Reprinted
http://www.asp.net/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api
- BT服务器的搭建（tracker-P2P服务器架设）（转）
文章虽然有点老,但原理差不多. 继上一篇文章(http://www.cnblogs.com/EasonJim/p/6601146.html)介绍了BT的原理,现在来看下BT服务端搭建的原理. 一.BT ...
- [C++11]_[0基础]_[左值引用声明和右值引用声明]
场景: 在 remove_reference 结构体中能看到右值引用的身影 &&, 那么这里的右值引用究竟有什么用呢? 常常也发现int& 和int&& 这两种 ...
- C#.NET的TabControl如何隐藏和显示页面
如果需要显示某个页面,则让他的Parent就是TabControl的控件名称,如果要隐藏,则等于null private void ToolStripMenuItemTeachPanelBa ...
- 《图论》——广度优先遍历算法(BFS)
十大算法之广度优先遍历: 本文以实例形式讲述了基于Java的图的广度优先遍历算法实现方法,详细方法例如以下: 用邻接矩阵存储图方法: 1.确定图的顶点个数和边的个数 2.输入顶点信息存储在一维数组ve ...
- HDU ACM 1073 Online Judge ->字符串水题
分析:水题. #include<iostream> using namespace std; #define N 5050 char a[N],b[N],tmp[N]; void Read ...
- Objective-C中单例
单例模式,由于其简单好用容易理解.同时在出问题时也容易定位的特点,在开发中经常用到的一个设计模式. 一般在程序中,经常调用的类,如工具类.公共跳转类等,我都会采用单例模式 这个写法是苹果推荐的写法 ...
- lockfile - conditional semaphore-file creator
LOCKFILE(1) LOCKFILE(1) NAME lockfile - conditional semaphore-file creator SYNOPSIS lockfile -sleept ...
- CentOS Linux搭建独立SVN Server全套流程(转)
环境为centos6.3 1.首先 看看机器上安装了svn了没有 rpm -qa |grep svn 2.如果没有安装 执行 yum -y install subversion 3.安装好了之后 新建 ...
- 深度解析开发项目之 01 - SVProgressHUD用法
深度解析开发项目之 01 - SVProgressHUD用法 首先来到工程的pch文件中 01 - 导入头文件 02 - 定义宏 03 - 项目中的使用 3.1 - SVHUD_Normal: 3. ...