jQuery: $.xxx()与$().xxx()中的$,为什么能同时支持两种写法?

2018-03-01 关键词:苏州网站建设  苏州网站制作  苏州做网站  苏州网站推广   3061

在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的方法扩展方式,真正理解其主要架构方式。苏州网站建设提醒小伙伴要多看基础理论,熟悉基础用法。
首页 网站建设 小程序 品牌设计 服务项目 案例展示 售后保障 联系方式 新闻中心 关于我们 人才招聘
我们的优势

细致入微的前期服务
精准的策划服务
精湛的网页设计
稳定 可靠 极速的域名和服务器
任何问题,24小时回复并处理

版权所有:苏州谢谢网络传媒有限公司  苏ICP备11087090号   

首页 电话 服务项目