Jquery126源码分析.pdf

jQuery源码分析版权所有

Jquery源码分析

1、概述

jQuery是一个非常优秀的JS库，与Prototype,YUI,Mootools等众多的Js类
库相比，它剑走偏锋，从web开发的实用角度出发，抛除了其它Lib中一些中看
但不实用的东西，为开发者提供了优美短小而精悍的类库。其使用简单，文档丰
富，而且性能高效，能极大地提高web系统的开发效率。因此可以说是web应
用开发中最佳的Js辅助类库之一。大部分开发者正在抛弃Prototype，而选择
Jquery做为他们进行web开发的JS库。
如是开发人员仅仅只知道文档中的简单的使用方法，却不明白Jquery的运
行原理和内部机制，在使用jquery时，肯定会碰到许多的问题。这些问题有一部
分是Jquery的Bug。大部分是自身的使用不当而造成的。而文档的简单的使用说
明很难解决问题。在调试基于jQuery的web应用时，很多时候都要跟踪进入
jQuery对象分析其运行状态以了解出错的原因。
如果对于web的应用的页面运行性能和效率有所要求的话，那么我们更应
该去明白其运行机理和核心源码。但是jQuery源码不像其它的类库那样，它有
点晦涩，难懂。这就是本源码分析的原因，让所有使用jQuery的读者，能快速
上手jQuery的源码，并在开发中得心应用。
Jquery的网络资源丰富，但Baidu了很久，很难找到那种完全深入地分析
Jquery源码的文稿。倒是Jquery的开发者，JohnResi的《ProJavascriptTechniques》
涉及到Jquery的源码的分析，但是其主指还是在于JavaScript的使用。那本书并
不能使我们完全细致地了解Jquery的源码。

作者：prk(彭仁夔)QQ：546711211Email:[e-mail]:http://jljlpch.javaeye.com
jQuery源码分析版权所有

第一篇Query（查询）

2、构建jQuery对象

在本节中，我们会就Jquery的运行机制和设计理念进行分析及说明。本节
主要从jQuery的设计理念e及其构建的源码进行剖析。

2.1、jQuery的设计理念

在使用jQuery之前，我们也许会问jQuery是什么？其实它的名字就很能反
映其主旨的。J是的JS，Query是指查询。如果把jQuery看作是一个查询的JS
类库。它和prototype，mootools等类库一样，为Web的Js开发提供辅助功能。
那为什么要选用jQuery呢？在jQuery出现之前，Prototype，YUI都已经是
成熟的Js的框架，而且是各有各的特点。并且市场的书和使用文档都很详尽。
为什么开发员会抛弃它们，而使用后起之秀的jQuery，它有什么优秀的特性吸引
开发人员呢？
回答这个问题，我们得明白jQuery的设计理念。回忆或想象一下，我们在
web开发中是如何使用JS？绝大多数时间都是进行如下五个方面的事情：
1、采用getElementById在Dom文档中找到Dom元素，然后取值或设值。
2、对元素采用innerHTML取其内容或设定其内容。
3、对元素进行事件的监听(如click)。
4、通过改变元素的CSS样式如height，达到视觉上的效果。
5、通过Ajax从服务器取值，往指定元素里添充内容。
从上面可以看，在使用Js开发时候就是在对Dom元素在进行操作。这个
Dom元素可能是单个或是集合的形式。对元素元素操作，对于document，window
是可以直接引用，但是对于其它的Dom元素，我们得从Dom文档树查找得到吧。
这样的话就可以把JS的操作分析两部分任务，
一、查找Dom元素，
二、对Dom元素进行操作。

对于使用JS熟练的开发者而言，也许手写document.getElementById或
elment.getElementsByTagName这样冗长的直接查找Dom元素觉得不是什么问

作者：prk(彭仁夔)QQ：546711211Email:[e-mail]:http://jljlpch.javaeye.com
jQuery源码分析版权所有

题，许会对element的event,attribute,style等操作也不含糊，但是对于IE、mozilla
等几大主流的浏览器的兼容足够让每一个JS高手头疼。
这是使用JS类库的主要原因。JS类库只要用得恰当的话，也不一定比直接
采用JavaScript的原始函数和对象的运行效率低。但是其却能极大地提高开发的
效率。
自从Prototype采用$符号做为document.getElementById的缩写，$符号似乎
成了查找元