- 1、本文档共16页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
PAGE1/NUMPAGES1
jQuery对象的构建
jQuery对象的构建从其原理可以看出,其统一的入口就是jQuery对象。
那么这个对象是如何生成的呢?jQuery的实质是Query,那么生成jQuery对象就可能看作是构建并运行一个查询器。
既然是查询,肯定会有查找到的结果(Dom元素),那么这些结果又存放在哪里呢?最好的地方当然是jQuery对象内面。
查询的结果可能是单个元素,也可能是集合如NodeSet。
也就是说jQuery对象内面应该有一个集合。
且这个集合是用来存放查询到Dom元素。
但jQuery对象是所有操作的统一入口,那么它的构建就不应只局限于从Dom文档树中查询到Dom元素,有可能是从别的集合中转移过来的Dom元素,或是html的片断生成的Dom元素。
Jquery文档中提供了四种构建方式:
jQuery(expression,[context]),jQuery(html),jQuery(elements),jQuery(callback)。
其中jQuery可以用$代替。
这四种方式是经常用到。
其实Jquery的参数可以是任何的元素。
也就是说任何的参数都可以构建jquery对象。
举几个例子:
1、$($(P))可以看出其参数可以是jQuery对象或ArrayLike的集合。
2、$()是$(document)的简写。
3、$(3)会把3放到jQuery对象中集合中。
对于如$(3)这样的其中元素(如ArrayLike集合的元素)不是Dom元素,最好不要构建jQuery对象,jQuery对象的方法设计的目的都是针对于dom对象的而进行的操作。
如果不清楚其使用的话,很有可能会导致错误。
上面讲了这么多大道理,现在从源码的角度细细分析:
通过jQuery(xxx)的调用实现没有生成对象,它的this是指向window对象的。
那么jQuery的那些实例方法是怎样继承过来的呢?看一下:
varjQuery=window.jQuery=window.$=function(selector,context){returnnewjQuery.fn.init(selector,context);①};这是jquery的总入口,jQuery对象不是通过newjQuery来继承其prototype中的方法,而是jQuery.fn.init函数生成的对象。
这里我们可以看出对于jQuery.prototype添加一些函数集的对象的意义不大。
newjQuery()还是可以的,但是生成的jQuery对象在return时会被抛弃。
故不要用newjQuery()来构建jQuery对象。
jQuery对象其实就是jQuery.fn.init对象。
那么jQuery.fn.init.prototype上就是挂着jQuery对象的操作方法。
如jQuery.fn.init.prototype=jQuery.fn;有时间可能会担心在589行就实现了把jQuery.fn中的函数放到jQuery.fn.init.prototype上去,那么之后的通过jquery.fn.extend的方法怎么办呢?这里是对jQuery.fn的引用。
在扩展jQuery的时候,只要把相关的函数extend到jQuery.fn就可以了。
现在我们看一下jQuery.fn.init是怎么完成工作的:
init:function(selector,context){selector=selector||document;//确定selector存在//第一种情况Handle$(DOMElement)单个Dom元素,忽略上下文if(selector.nodeType){②this[0]=selector;this.length=1;returnthis;}if(typeofselector==string){//selector为string
文档评论(0)