首页 > 代码库 > jquery的$.extend和$.fn.extend作用及区别,兼它们的一些小细节
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;
如果你知道原型就会立即明白他的意思
jquery的$.extend和$.fn.extend作用及区别,兼它们的一些小细节
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。