$.extent的理解

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

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

举个例子:

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

首先看$.extend),

$.extend{

max:functiona,b){

return a>b?a:b;

},{

min:functiona,b){

return a<b?b:a;

})

这里就可以直接调用:$.max2,3)//3

再看$.fn.extend):

$.fn.extend{
alertWhileClick: function) {
$this).clickfunction) {
alert$this).val));
});
}
});
//$”#input1″)是jQuery的实例,调用这个扩展方法
$”#input1″).alertWhileClick);

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

举个综合例子:

<div value=’100′ id=”content” style=” 100px;height: 100px;border: 1px solid green;” ></div>

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

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

var defult={
background:’green’
}
$.extendtrue, defult, option);

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

})

</script>

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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平