$.extent()的理解

$.extend()主要是用来扩展插件的，所谓的插件就是封装好的函数或者方法，可以直接调用。

$.extend()与$.fn.extend()（或者写成$.prototype.extend()或者jquery.prototype.extend()）这两个好像，但又不一样，主要区别在哪里呢，区别在于前者是对jQuery类的一个封装，可以把jQuery看成一个类；而后者是经过实例化进行调用实例化的函数。

举个例子：

写个简单的求最大值或者最小值的插件：

首先看$.extend()，

$.extend({

max:function(a,b){

return a>b?a:b;

},{

min:function(a,b){

return a<b?b:a;

})

这里就可以直接调用：$.max(2,3)//3

再看$.fn.extend():

$.fn.extend({
alertWhileClick: function() {
$(this).click(function() {
alert($(this).val());
});
}
});
//$("#input1")是jQuery的实例，调用这个扩展方法
$("#input1").alertWhileClick();

另外，$.extend(obj1,obj2)这种写法是将obj2中与obj1中相一样的属性进行覆盖，并且添加obj1中没有的属性，如果obj1中有某个属性而obj2中没有，那么最后在替换后的obj1中也会保持存在，extend这个单词就是扩展的意思，也就是obj2里的是用来更新obj1的内容的。

举个综合例子：

<div value='100' id="content" style="width: 100px;height: 100px;border: 1px solid green;" ></div>

<script type="text/javascript">
(function($){

 

$.fn.extend({//这里加个大括号说明这里是个对象，那用jq实例化之后直接像调用object一样去调用函数就可以了。
'setColor':function(option){

var defult={
background:'green'
}
$.extend(true, defult, option);

$(this).css('background',defult.background);
}
})
$('#content').setColor()//默认绿色
$('#content').setColor({background:'red'})//红色

})

</script>

 

参考：http://www.cnblogs.com/yuqingfamily/p/5775950.html

转载于:https://www.cnblogs.com/sweeeper/p/8024267.html