2.1、jQuery的设计理念
使用jQuery之前,我们都会问jQuery是什么?jQuery是一个类库,和 prototype,mootools等类库一样,为Web的Js开发提供辅助功能。那为什么要选 用jQuery呢?在jQuery出现之前,Prototype,YUI都是很成熟的Js的框架,而且 是各有各的特点。为什么要抛弃它们,而使用后起之秀的jQuery,它有什么优秀 的特性吸引开发人员呢?
回答这个问题,我们得明白jQuery的设计理念。回忆或想象一下,我们在web 开发中是如何使用JS?绝大多数时间都是采用getElementById在Dom文档中找到 Dom元素,然后取值或设定值,采用innerHTML取其内容或设定其内容,或进行事 件的监听(如click),在控制样式方面,我们会进行height,width,display等的 改变,达到视觉上的效果,对于Ajax方面,也是取到数据在页面的某元素里面去 添充内容。
综之,我们就是在对Dom元素在进行操作。这个元素可能是一个或是多个。这 个元素可能是document,window或Dom元素。这样我们的任务就是二大部分,一 是找Dom元素,二是对Dom元素进行操作。
对于用得熟练一点,不管是采用如getElementById这样的直接查找方式还是 采用如Element.lastChild这类的间接查找方式不是很难的,对于Dom元素,Dom 的操作方面也是很丰富,也不是很难使用?那么要类库做什么用呢?最难的一个 问题就是浏览器的兼容的问题。所有的JS框架都要解决这一个问题,同时简化JS 的本身自带的操作。
Prototype可以说是开创了Js类库的先河,给我们耳目一新的感觉。它解决大 部分的浏览器的兼容的问题。同时简化了原始函数名长难于记忆的经常书写出的 错的问题(采用$(xx)代替getElementById),提供了Ajax的访问方式,扩展了 Array,Object,Function,Event等JS原生对象。
但是这些还是不能满足开发的需要,比如在Dom树中寻找dom元素,仅仅只能 是通过元素的ID,但是我们想要更方便的查找方法,同时还希望能有一个统一的 入口,不要太泛,学习曲线过高或难于使用。
Jquery就是从这里出发,把所有一切都统一在jQuery对象中。使用jQuery就 是使用jQuery对象。其实jQuery开创性的工作就是如其名一样:query。它强大 的查找功能令所有的框架都黯然失色。
jQuery实质就是一个查询器。在查询器的基础还提供对查找到的元素进行操 作的功能。这样说来jQuery就是查询和操作的统一。查询是入口,操作是结果。
jQuery在实现上也可以分成两大部分,一部分是jQuery的静态方法,也可以 称作实用方法或工具方法,通过jQuery.xxx()的jQuery命名空间直接引用。第二 部分是jQuery的实例方法,通过jQuery(xx)或$(xx)来生成jQuery实例,然后通 过这个实例来引用的方法。这部分的方法大多数是从采用静态方法代理来完成功 能。真正的功能性的操作都在jQuery的静态方法中实现。
这些功能细分起来,可以分成以下几个部分:
1、Selector,查找元素。这个查找不但包含基于CSS1~CSS3的CSS Selector 功能,还包含其对直接查找或间接查找而扩展的一些功能。
2、Dom元素的属性操作。Dom元素可以看作html的标签,对于属性的操作就是 对于标签的属性进行操作。这个属性操作包含增加,修改,删除,取值等。
3、Dom元素的CSS样式的操作。CSS是控制页面的显示的效果。对CSS的操作那 就得包含高度,宽度,display等这些常用的CSS的功能。
4、Ajax的操作。Ajax的功能就是异步从服务器取数据然后进行相关操作。
5、Event的操作。对Event的兼容做了统一的处理。
6、动画(Fx)的操作。可以看作是CSS样式上的扩展。