在jquery中,$('xxx').xxxx()这种写法,其实是通过jQuery.fn.extend({xxx: function() {}})的方式进行方法绑定和扩展的,而$.xxx()这种方式的方法是通过jQuery.extend({xxx: function() {}})的方式进行方法绑定和扩展的;
console.log(jQuery()) 其实是个对象,console.log(jQuery('#test')),如果有此元素存在,看起来像数组,其实也是对象,这种叫“类数组”;可以搜索看下类数组相关知识;
好,下面苏州网站制作开始说下这个问题,第一是extend的实现方法;第二是jquery为什么能同时支持$.xxx()与$().xxx()这两种写法;
第一,extend的实现方法;由于源码较多,我在这儿就不直接展示出来了,有兴趣可以去找到看看;其实简单讲,extend主要用于对象的合并,
但是从源码可以看出,当参数只有一个对象的时候,就是直接将传入对象合并到调用的对象上 (即jquery或jquery.fn);
所以,当调用jQuery.extend时,就会将传入的对象里面的方法合并写入到jQuery对象上面,就可以对其进行扩展; 同理,使用jQuery.fn.extend时,就可以对jQuery.fn进行扩展;
第二,$.xxx()与$().xxx()两种的区别;第一种$.xxx()其实是调用的jQuery对象上面的方法,也就是通过jQuery.extend进行扩展的方法;有人会说,jQuery是一个函数,但是函数在js也是对象,也可以向其添加属性和方法;而第二种$().xxx()则是调用的jQuery.fn对象上面的方法,也就是通过jQuery.fn.extend进行扩展的方法;
第一种通过jQuery.extend进行扩展的属性和方法是直接写入jQuery对象,所以也就可以直接通过$.xxx()的方式调用,这个很容易理解;
第二种,通过jQuery.fn.extend进行扩展的方法和属性为何能够通过$().xxx()进行调用呢;这个就要从jQuery的整个架构来说;当执行$()时,访问了代码:
Jquery=function(selector,conyext){
Return new jquery.fn.init(selector,context,rootjquery);
}
可以看出,其实是实例化了一个jQuery.fn.init的对象;在这我们就不再讨论jQuery.fn.init里面具体干了什么,但可以通过源码可以看出,其最终执行了“return this”,也就是返回了jQuery.fn.init的实例对象;那如何通过$()可以访问到jQuery.fn上面的属性和方法呢?就是通过这句代码:
jquery.fn.init.prototype=jquery.fn;
它将jQuery.fn赋给了jQuery.fn.init.prototype,所以,jQuery.fn.init的实例对象也就可以直接访问jQuery.fn上面的方法和属性了;所以,当你通过$().xxx()时,其实访问了jQuery.fn.xxx()方法;
其实,这个问题去看jquery源码就能很清楚的知道了,要明白jquery的方法扩展方式,真正理解其主要架构方式。苏州网站建设提醒小伙伴要多看基础理论,熟悉基础用法。