jQuery： $.xxx()与$().xxx()中的$，为什么能同时支持两种写法？

网友解答: 其实，这个问题去看jquery源码就能很清楚的知道了，从楼主的问题说明里面只是明白了jquery的方法扩展方式，但并没有真正理解其主要架构方式；我下面所说的都是基于2.0.3

其实，这个问题去看jquery源码就能很清楚的知道了，从楼主的问题说明里面只是明白了jquery的方法扩展方式，但并没有真正理解其主要架构方式；

我下面所说的都是基于2.0.3版本jquery源码进行说明，首先，描述中有几个错误需要指正下：

第一，在jquery中，$('xxx').xxxx()这种写法，其实是通过jQuery.fn.extend({xxx: function() {}})的方式进行方法绑定和扩展的，而$.xxx()这种方式的方法是通过jQuery.extend({xxx: function() {}})的方式进行方法绑定和扩展的；如下图，$.ajax通过下图绑定：

而$('xxxx').attr()则通过下面方式：

第二，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.fn.init的对象；在这我们就不再讨论jQuery.fn.init里面具体干了什么，但可以通过源码可以看出，其最终执行了“return this”，也就是返回了jQuery.fn.init的实例对象；那如何通过$()可以访问到jQuery.fn上面的属性和方法呢？就是通过下图这句代码：

它将jQuery.fn赋给了jQuery.fn.init.prototype，所以，jQuery.fn.init的实例对象也就可以直接访问jQuery.fn上面的方法和属性了；所以，当你通过$().xxx()时，其实访问了jQuery.fn.xxx()方法;