您的位置：首页 > Web前端 > JQuery

JQuery $.extend 与$.fn.extend

2015-07-03 13:45 639 查看

JQuery $.extend 与$.fn.extend

JQuery的extend方法可以为对象拓展新的方法和属性。作为一种插件机制，具有很大的灵活性。$.extend的使用方法如下：

var a = {"b":"bb","c":"cc"};
var b = $.extend(a,{"d":"dd","e":"ee","b":"haha"});
var c = $.extend({},{"d":"dd","e":"ee"});

上述代码结果如下:

a={b: “haha”, c: “cc”, d: “dd”, e: “ee”}

b={b: “haha”, c: “cc”, d: “dd”, e: “ee”}

c={d: “dd”, e: “ee”}

结果说明：

当把{“d”:”dd”,”e”:”ee”,”b”:”haha”}绑定给a时，a的结构也被破坏，所以a的值也会发生变化。

当把{“d”:”dd”,”e”:”ee”,”b”:”haha”}绑定给a时，若存在与a相同的键值，则会将a的键值覆盖。

c中未指定要绑定的对象，因此只有c结构发生变化

语法

$.extend(dest[,src1[,src2[, [,srcn]]]])

———————————————————————-

要想理解$.extend与$.fn.extend的区别，还需要再看一个JQuery帮助手册的例子:

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

<input type="checkbox" ><input type="checkbox" ><input type="checkbox" ><input type="checkbox" >
<input type="radio"><input type="radio"><input type="radio"><input type="radio">

jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

代码结果：

筛选框全部选中，单选框全部未选中

代码解释：

jQuery.extend绑定的函数使用jQuery来调用，而jQuery.fn.extend绑定的函数使用$(“#id”)对象来调用，类似于静态方法通过类名直接调用和成员方法通过实例对象调用的区别。

$.extend有一个重载原型

语法

$.extend(boolean,dest[,src1[,src2[, [,srcn]]]])

从上述语法可知，参数多出一个布尔值，当boolean=true时，实现深度克隆：

var result=$.extend( true,  {},
{ a: "aa", b: {c: "cc",d:"dd"} },
{ e: "ee", b: {c: "ad",f:"ff"} } );

result = {a: “aa”, b: {c: “ad”, d: “dd”, f: “ff”}, e: “ee”}

从result值可知，深度克隆会递规复制所有KEY值直到Value中不包含JSON对象并会覆盖相同KEY的VALUE值

当boolean=true时，实现浅克隆：

var result=$.extend( false,  {},
{ a: "aa", b: {c: "cc",d:"dd"} },
{ e: "ee", b: {c: "ad",f:"ff"} } );

result = {a: “aa”, b: {c: “ad”, f: “ff”}, e: “ee”}

从result值可知，浅克隆只会复制第一层KEY值并会覆盖相同KEY的VALUE值

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航