jQuery的功能:
我们日常使用javascript干的最多的事情也就是
1.查找DOM节点
2.然后再对查找到的节点进行操作,例如修改样式 添加事件监听 修改内容等。
而jQuery框架的功能就是根据传递进来的参数赛选DOM节点,将DOM节点数组封装成jQuery对象.然后对这个 jQuery对象进行操作。
jQuery框架的总体架构:
可以看到这里使用了一个匿名函数将所有源码进行了封装,这样有以下几个好处:
1. 可以防止命名冲突 里面定义的变量不会给外面的矛盾。
2. 可以实现私有变量和私有方法,只将提供给外界的公共接口暴露出来。
jQuery对象的创建:
由上面的讲解可知所有的功能都是建立在jQuery对象的基础之上的所以我们首先来看一下这个对象的构建:
这里我们可以看到其实jQuery对象就是jQuery.fn.init对象,在init方法里面完成了jQuery对象的创建。这个方法的作用就是根据接受的字符串创建一个jQuery对象,其实这个对象就是一个DOM节点集合的数组。
jQuery对象的扩展机制:
创建了jQuery对象接下来就是要对对象进行方法扩展了。jQuery中有两种类型的方法,一种是jQuery的静态方法还有一种是类的实例方法。
接着定义了extend方法: 用来扩展jQuery对象。
从上面的方法可以看出
jQuery.extend()是给类扩展静态方法
jQuery.fn.extend()是给类扩展实例方法
jQuery库的扩展:
上面这些准备工作都做完之后接着就是要对jQuery对象进行扩展了,对于jQuery的扩展可以分为以下几个模块:
核心模块 :
1. 对jQuery对象进行操作的一些方法,因为jQuery对象实际是一个数组所以就是添加了一些数组的常用方法.。 例如: size() get() first() last() slice() map()等。
2. 缓存系统
用来给DOM节点上存贮数据的。方法有data() removeData()两个方法。具体实习实现参考后面的文章。
3. 队列系统
这几个方法主要用来实现动画模块,方法有queue() dequeue() clearQueue().
工具类模块 :
这部分主要提供了一些工具方法例如对字符串的处理,数组的处理,浏览器特性的一些测试等。
事件处理模块 :
jQuery对于事件的处理方式是: 创建了一个Event构造函数用来生成 事件对象 ,这个对象是在 W3C event对象基础上建立的,并且屏蔽了浏览器之间的差异。还定义了一个event对象 里面添加 了一些常用的对事件处理的方法 例如事件绑定 解绑 事件触发 等这些方法使用的都是Event构造函 数创建出来的对象。有了这个event对象 接下来就是利用each方法和extend方法jquery.fn这个对象添加一些事件监听器。内部都是调用了event的方法。
动画模块 : 包括CSS选择器模块、 DOM操作模块。