jquery学习笔记之extend()

来源：互联网发布：韩国讲网络暴力的电影编辑：程序博客网时间：2024/06/14 00:02

官方资料：
jQuery.extend()

jQuery.fn.extend()

jQuery.extend()用于将两个或多个对象的内容同时合并到第一个对象中

$(function(){        var objA = {name:'张三',addr:{country:'中国',city:'北京'},age:20};        var objB = {name:'李四',addr:{city:'广州'},sex:'男'};        var emptyObj = {};        console.log("objA===>"+JSON.stringify(objA));        console.log("objB===>"+JSON.stringify(objB));        var result = $.extend(objA,objB);        console.log("objA===>"+JSON.stringify(objA));        console.log("result===>"+JSON.stringify(result));    });

这里写图片描述
观察上图显示的结果，我们可以看到该方法中的第一个参数被修改，但有时我们又不希望的被修改，这时我们可以用一个空对象作为目标对象(第一个参数)

var result = $.extend(emptyObj,objA,objB);

这里写图片描述

如果我们希望addr中的属性也能够被覆盖，可以使用布尔类型的deep参数来实现，如果值为false则不需要设置该参数，此处仅为了演示效果。

var result = $.extend(false,objA,objB);

这里写图片描述
根据显示内容可知，当deep为false时，addr属性是被直接覆盖的(即没有考虑其内部属性)

var result = $.extend(true,objA,objB);

这里写图片描述
根据显示内容可知，当deep为true时，addr属性是被循环覆盖的(即其内部属性也被相同关键字的属性值替换)

$(function(){        var objA = {name:'张三',addr:{country:'中国',city:'北京'},age:20};        var objB = {name:'李四',addr:{city:'广州'},sex:'男'};        var emptyObj = {};        console.log("objB===>"+JSON.stringify(objB));        var result = $.extend(emptyObj, objA,objB);        console.log("result===>"+JSON.stringify(result));        emptyObj.addr.city = '武汉';        console.log("<===>emptyObj.addr.city = '武汉'<===>");        console.log("objB===>"+JSON.stringify(objB));        console.log("result===>"+JSON.stringify(result));       });

这里写图片描述

让我们将deep参数设置true，看看效果

var result = $.extend(true,emptyObj, objA,objB);

这里写图片描述
对比上面两个实验结果可知，当deep为false时，对象和数组的拷贝是浅拷贝，只是引用了该对象或数组的引用，而非具体的值。
而当deep为true时，对象和数组的拷贝是深拷贝，是将其内部每一个基础类型的元素的值进行了复制。

当只有一个参数时，则会将jQuery对象本身作为目标元素，这样，你可以添加新函数到jQuery的命名空间中，这对于插件的作者希望添加新的函数到jQuery中是有用的。

$(function(){        $.extend({'say': function() { console.log("hello world!");}});        $.say();    });

这里写图片描述

jQuery.fn.extend()用于将一个对象合并到jQuery实例对象上
借用jQuery官网的例子，我们来看下效果：

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery.fn.extend demo</title>  <script type="text/javascript" src="jquery-3.2.1.js"></script>  <style>  label {    display: block;    margin: .5em;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><label><input type="checkbox" name="foo"> Foo</label><label><input type="checkbox" name="bar"> Bar</label><script>jQuery.fn.extend({  check: function() {    return this.each(function() {      this.checked = true;    });  },  uncheck: function() {    return this.each(function() {      this.checked = false;    });  }});// Use the newly created .check() method$( "input[type='checkbox'][name='foo']" ).check();</script></body></html>

界面显示效果为：
这里写图片描述

阅读全文

0 0