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
时间: 2024-08-06 13:30:36
jquery之extend的相关文章
五.jQuery源码解析之jQuery.extend(),jQuery.fn.extend()
给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生.jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN])这两个属性都是用于合并两个或多个对象的属性到target对象.deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.通过这种方式可以在jQuery或jQuery.fn
理解jquery的$.extend()、$.fn和$.fn.extend()
jQuery.fn jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//-. //-- }; 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦. 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1″) 会生成一个 jQuery类的实例. jQuery.ext
jquery插件之jquery.extend和jquery.fn.extend的区别
jquery.extend jquery.extend(),是拓展jquery这个类,即可以看作是jquery这个类本身的静态方法,例如: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
jquery的extend和fn.extend
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. jQuery.fn = jQuery.prototype = { init: function( selector, cont
jQuery.extend()方法和jQuery.fn.extend()方法
jQuery.extend()方法和jQuery.fn.extend()方法源码分析 这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: <!doctype html> <html> <head> <title></title> <script src='jquery-1.7.1.js'></script> <
jquery.fn.extend与jquery.extend用法与区别
关于jquery.fn.extend与jquery.extend用法与区别. jQuery为开发插件提拱了两个方法,分别是: 代码如下 复制代码 jQuery.fn.extend(object); 和 jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. 代码如下 复制
jQuery.extend和jQuery.fn.extend的区别
我们先把jQuery看成了一个类,这样好理解一些. jQuery.extend(),是扩展的jQuery这个类. 假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能.这样的话,不论是男人,女人,xx人.....等能继承这个技能(方法)了. 可以如下图这样写着: 然后:$.liu();这样就能打印出来”liu“这个字符串 代码在下面: 这说明啥啊,这说明.liu()变成了jQuery这个类本身的方法(object)
jquery,fn,extend和jquery.extend
1 把jquery看成是一个类,jquery.extend()是扩展这个类的静态方法,也即是扩展的全局函数,扩展的方法只跟这个类本身有关,跟具体的jquery这个类的实例化对象无关. 例如:$.each(); 2 jquery.fn.extend扩展的是jquery原型对象的方法,扩展的方法只有jquery这个类的实例对象才能使用. 例如:$('#aa').eat();
jQuery.fn.extend与jQuery.extend 的区别
1 jquery.extend 是jquery 静态的方法 实例 jQuery.extend({ liu: function(){ alert('liu'); } }); 使用方法:$.liu();这样就能打印出来”liu“这个字符串 2 Jquery.fn.extend 是jquery 实例的方法 实例 jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//…