首页 > 代码库 > jquery之extend

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="http://www.mamicode.com/extend" id="btn1">
12        <p>
13        <p>全局方法继承$.hello()
14            <input type="button" value="http://www.mamicode.com/触发" 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="http://www.mamicode.com/触发" 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="http://www.mamicode.com/深度拷贝触发" id="btn5">
26            <input type="button" value="http://www.mamicode.com/非深度拷贝触发" id="btn6">
27        </p>
28    </body>
29    <script type="text/javascript" src="http://www.mamicode.com/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默认的拷贝方式是非深度拷贝