jquery的$.extend和$.fn.extend作用及区别,兼它们的一些小细节
$.extend(obj);是为了扩展jquery本身,为类添加新的方法
$.fn.extend(obj);给JQUERY对象添加方法。
如(1):
$.extend({ add:function(a,b){ return a+b; } }) $.add(5,8) //return 13
注意没有,这边的调用直接调用,前面不用任何对象。直接$.+方法名
(2):
$.fn.extend({ clickwhile:function(){ $(this).click(function(){ alert($(this).val()) }) } }) $('input').clickwhile();//当点击输入框会弹出该对象的Value值
注意调用时候前面是有对象的。即$('input') 这么个东西。
前面介绍了它们的本质区别,现在具体介绍一下它们分别的细节
其实$.extend()有两种写法
(1)$.extend(obj);
这是只有一个参数,代表的意义是:为jQuery类添加类方法,可以理解为添加静态方法,也就是全局方法。
(2)$.extend( target, object1, object2, object3, object4,[objectN]);
这是两个或两个以上的参数,代表的意义是:用一个或多个其他对象来扩展一个对象,返回被扩展的对象。即也就是扩展和覆盖了第一个对象。
(function ($) { var aaa={name:'1',age:'20',sex:'NV'}; var bbb={name:'2',age:'18'}; var ccc = $.extend( aaa, bbb); alert(ccc.sex);//NV alert(aaa.name);//2 })(jQuery);
不知大家见过 $.extend({}, aaa, bbb)中带{}吗?请看下面
(function ($) { var aaa={name:'1',age:'20',sex:'NV'}; var bbb={name:'2',age:'18'}; var ccc = $.extend({}, aaa, bbb); alert(ccc.sex);//NV alert(aaa.name);//1 })(jQuery);
为何alert(aaa.name)的结果不同?如果你知道就不用往下看了
这是因为:多个对象参数合并时,会破坏第一个对象的结构,所以可传递一个空对象作为第一个参数
$.fn.extend(obj);
$.fn 中的fn是什么意思?
其实是prototype,即$.fn=$.protoytpe;
如果你知道原型就会立即明白他的意思