- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
- <title>jquery继承</title>
- </head>
- <body>
- <p>
- 对象继承{name:"ws",age:"23"}<={name:"king",sex:"man"}
- <p type="text" id="parent1"></p>
- <input type="button" value="extend" id="btn1">
- <p>
- <p>
- 全局方法继承$.hello()
- <input type="button" value="触发" id="btn3">
- <p>
- <p>
- 类插件方法触发
- <br />
- name:<input type="text" id="name">
- <br />
- age:<input type="text" id="age">
- <input type="button" value="触发" id="btn4">
- <p>
- <p>
- 深度拷贝{name:"ws",location:{city:"ningbo",code:"315000",locOther="other"},other:"第一岑对象中的参数"}<={name:"king",location:{city:"shaoxin",code:"311824"}}
- <p id="p5"></p>
- <p id="p6"></p>
- <input type="button" value="深度拷贝触发" id="btn5">
- <input type="button" value="非深度拷贝触发" id="btn6">
- </p>
- </body>
- <script type="text/javascript" src1="jquery-1.8.2.js"></script>
- <script>
- $(function () {
- /*对象继承*/
- $("#btn1").click(function () {
- var result = $.extend({}, { name: "ws", age: "23" }, { name: "king", sex: "man" });
- $("#parent1").html("name:" + result.name + "--" + "age:" + result.age + "--" + "sex:" + result.sex);
- });
- /*方法继承*/
- $.extend({
- hello: function () {
- alert("全局方法");
- }
- });
- /*fn插件方法*/
- $.fn.extend({
- fnmethod: function () {
- $(this).click(function () {
- alert($(this).val());
- })
- }
- });
- $("#name").fnmethod();
- /*全局jquery方法*/
- function hello() {
- alert("子方法");
- }
- $("#btn3").click(function () {
- $.hello();
- });
- /*类插件方法触发*/
- $("#btn4").click(function () {
- $.ws.printInfo({
- name: $("#name").val(),
- age: $("#age").val()
- })
- });
- /*深度拷贝*/
- $("#btn5").click(function () {
- var result = $.extend(true, {}, { name: "ws", location: { city: "ningbo", code: "315000", locOther: "other" }, other: "第一岑对象中的参数" }, { name: "king", location: { city: "shaoxin", code: "311824" } });
- $("#p5").html("name:" + result.name + "--city:" + result.location.city + "--code:" + result.location.code + "--<b>locOther:" + result.location.locOther + "</b>--<b>other:" + result.other + "</b>");
- });
- $("#btn6").click(function () {
- var result1 = $.extend({}, { name: "ws", location: { city: "ningbo", code: "315000", locOther: "other" }, other: "第一岑对象中的参数" }, { name: "king", location: { city: "shaoxin", code: "311824" } });
- $("#p6").html("name:" + result1.name + "--city:" + result1.location.city + "--code:" + result1.location.code + "--<b>locOther:" + result1.location.locOther + "</b>--<b>other:" + result1.other + "</b>");
- });
- });
- /**类插件方法触发*/
- (function ($) {
- $.ws = {
- op: {
- name: "ws",
- age: 20,
- other: "other param"
- },
- printInfo: function (newop) {
- var op_ = $.extend({}, this.op, newop);
- console.info("name:" + op_.name);
- console.info("age:" + op_.age);
- console.info("sex:" + op_.other);
- }
- }
- })(jQuery);
- </script>
- </html>
- Jquery的扩展方法extend是我们在写插件的过程中常用的方法
- 模型:extend(dest,src1,src2,src3...); 解释:将src1,src2,src3...合并到dest中,返回值为合并后的dest
- 1. 全局方法
- 为扩展jQuery类本身.为类添加新的方法
- 可以理解为添加静态方法
- $.extend({
- hello:function(){alert('hello');}
- });
- 如何调用:$.hello(), 它将覆盖其他子的hello()方法
- 2.jquery的实例对象方法
- (给jQuery对象添加方法)如:点击任何Dom对象弹出它的value
- $.fn.extend({fnmethod:function(){
- $(this).click(function(){
- alert($(this).val());
- })
- }});
- 3.关于深度拷贝
- 深度拷贝
- var result=$.extend( true, {}, {name:"ws",other:{x:xvalue,y:yvalue}},{name:"ws",other:{x:xx}}}
- => {name:"ws",other:{x:xx,y:yvalue}}
- 非深度拷贝
- var result=$.extend( false, {}, {name:"ws",other:{x:xvalue,y:yvalue}},{name:"ws",other:{x:xx}}}
- => {name:"ws",other:{x:xx}}
- 区别就是深度拷贝会把对象中的对象的所有属性都拷贝过来 ,而非深度拷贝则不会
- 个人理解:可以吧对象理解为一个json对象,jquery的extend会继承所有对象中的顶层属性,而如果需要再继承对象属性中的属性,那么需要用到深度继承
- jquery默认的拷贝方式是非深度拷贝
- //该片段来自于http://www.codesnippet.cn/detail/090520149471.html
来源: http://www.codesnippet.cn/detail/090520149471.html