jQuery学习手记（二）——源码解析

今天主要深入学习了一下jQuery，由于自己javascript方面的基础知识不足，所以直接看其源码比较吃力，或者说好多地方根本就看不懂， 于是就在网上查阅了部分关于其源码分析的资料，找到两份资料感觉不错。其一是《jQuery工作原理解析以及源代码示 例》（http://sharryjava.javaeye.com/blog/819203），另一份是从网上下载的《jQuery1.2.6源码分 析》。由于暂时还未接触到jQuery的实际应用（我现在看这个只是为了对参与广东电网信息中心门户系统做一个技术准备），所以对于后一份材料只是粗略的 看了一下，感觉后一分材料要是能够仔细认真地看完，那对于jQuery的源码应该是可以掌握。不过我这一次就没有仔细看了，毕竟没怎么用，看多了也不一定 记得住，只是大概了解了下其思想。

***********************************************************************************************************************************************

jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的.
从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库.
jQuery改变javascript编码方式!
那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程:
1)查找(创建)jQuery对象:$(”selector”);
2)调用jQuery对象的方法完成我们需要完成的工作:$(”selector”).doOurWork();
ok,jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的.这两个步骤是jQuery的编码逻辑核心! 要实现这种简洁编码方式,创建jQuery对象这一环节至关重要.因此,jQuery的dom元素查找能力相当强悍.此外,jQuery对象的方法肯定是有限的,有限的方法满足不了日益增长各有所需的要求,所以,必须提供jQuery对象方法的扩展能力. 强悍的dom元素查找能力,以及随心所欲的方法扩展,这两点正是jQuery的核心所在!

在所有的例子中有一个核心问题，为了实现对jQuery对象属性/方法/事件的插件式扩展，jQuery使用了一种称为prototype的设计模式。如 果您有一些javasciprt的面向对象方面的知识,就会知道,jQuery.prototype原型对象上的扩展属性/方法和事件,将会给 jQuery的对象/”扩展”.基于这一点,jQuery是这样写的:jQuery.fn = jQuery.prototype.所以,当我们扩展一个插件功能时,如下:
jQuery.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};
其实就是:
jQuery.prototype.check = function() {
return this.each(function() {
this.checked = true;
});
};
综上所述,jQuery给我们带来了一个简洁方便的编码模型(1>创建jQuery对象;2>直接使用jQuery对象的属性/方法/事件),一个强悍的dom元素查找器($),插件式编程接口(jQuery.fn),以及插件初始化的”配置”对象思想.

***********************************************************************************************************************************************

在WEB开发中，我们用到js，主要是完成如下五个方面的事情：

1、采用getElementById在Dom文档中找到Dom元素，然后取值或设值。

2、对元素采用innerHTML取其内容或设置其内容。

3、对元素进行事件的监听（如click）

4、通过改变元素的CSS样式，达到视觉上的效果。

5、通过ajax从服务器取值，往指定元素里填充内容。

从上面可以看出，在使用JS开发就是在对Dom元素在进行操作。这个Dom元素可能是单个或是集合的形式。对元素操作，对于 document,window是可以直接饮用，但对于其他的dom元素，我们得从Dom文档树查找得到吧。这样我们可以把JS的操作分析两部分任务： 一、查找Dom元素；二、对Dom元素进行操作。

实际上我们可以把jQuery解释为jQuery实质就是一个查询器。在查询器的基础上提供对查找到的元素进行操作的功能。这样说来jQuery就是查询和操作的统一。查询是入口，操作是结果。

jQuery对象在代码分成两部分，一部分是jQuery的静态方法，也可以称作实用方法或工具，通过jQuery.xxxx()的jQuery命名空间 直接引用。第二部分是jQuery的实例方法，通过jQuery(xx)或$(xx)来生成jQuery实例，然后通过这个实例来引用的方法。这部分的方 法大多数是从采用静态方法代理来完成功能。真正的功能性的操作都在jQuery的静态方法中实现。

这些功能细分起来 ，可以分成以下几个部分：

1、Selector查找元素。这个查找不但包含CSS1~CSS3的CSS Selector功能，还包含其对直接引用或间接引用Dom元素而扩展的一些功能。

2、Dom元素的属性操作。Dom元素可以看作html的标签，对于属性的操作就是对于标签的属性进行操作。这个属性操作包含增加、修改、删除、取值等。

3、Dom元素的CSS操作。CSS是控制页面的显示的效果。对CSS的操作那就得包含高度、宽度、display等这些常用的CSS的功能。

4、Ajax的操作。Ajax的功能就是异步从服务器取数据然后进行相关操作。

5、Event的操作。对Event的兼容做了统一的处理。

6、动画(Fx)的操作。可以看作是CSS样式上的扩展。

以上其实都是引自《jQuery1.2.6源码分析》，因为没有实际的应用需求，所以对里面的内容并没有细看，有需要的可以自己翻看其中的内容。