从零实现一个简易jQuery框架之一—jQuery框架概述

我们知道，不管学习任何一门框架，了解其设计的理念、目的、总体的结构及核心特性对我们使用和后续的深入理解框架都是有很大的帮助的。因此在这里先梳理一下本人对jQuery框架的一些理解。

设计目的(为什么要设计这个框架)

jQuery可以分解为JavaScript + Query。即JavaScript查询的意思。所以jQuery的核心目标就是JavaScript查询，通过选择DOM元素再对DOM元素进行操作。并解决了跨浏览器兼容问题，使DOM操作趋于统一。

如何实现

选择DOM是为了对其进行进一步的操作。这些操作主要包括以下几个部分

• 属性操作

　　如class,style,attribute等

• 元素操作

　　如元素的创建、添加、移动、复制、删除等

• 内容操作

　　通过innerHTML等获取或设置元素的内容

• 样式操作

　　如对元素的width、height、position、display等样式进行获取或修改

• 事件操作

　　Event是用户与浏览器进行动态交互的重要模块。如添加、删除事件等

• 通信操作

　　Ajax技术用于客户端和服务器端进行异步通信，实现页面的局部刷新。

jQuery 核心特性

1、jQuery()或$()

jQuery把所有的操作都包含在一个jQuery()函数中，提供了一个统一的操作入口jQuery()或$()。

jQuery框架的基础是查询，即查询文档元素对象。因此我们可以认为jQuery函数对象就是一个选择器，并在此基础上构建和运行查询过滤器。

需要注意的是：jQuery对象的方法都是针对DOM元素对象进行操作的。

2、jQuery构造函数

jQuery把所有操作都包装在一个jQuery()函数中，形成了统一(也是唯一)的操作入口。能够解析任意的数据类型，但是能够解析的参数包括以下四种类型

• $(expression,context)

　　expression可以是一个ID，DOM元素名，CSS表达式，XPath表达式。

　　context表示查找的上下文环境，若不写，则表示在整个document中查找

• $(html)

　　html表示一个HTML结构字符串，此时jQuery将创建一个对应结构的html文档片段。

 $("div").append($("<p>hello world</p>"))

• jQuery(element)

　　element表示一个DOM对象或集合，把DOM元素或集合当中的DOM元素转换为jQuery对象。

$(document).ready(function () {
    alert("hello world");
})
//将document文档对象转换为jQuery对象，然后调用ready方法，ready处理函数为document绑定一个事件，当页面初始化之后，弹出弹出框。

• $(fn)

　　fn是一个处理函数，由于$(document).ready()使用频繁，所以jQuery使用$()来代替。表示在DOM元素解析完成后就执行代码

3、链式写法

核心就是通过return语句返回jQuery对象。

4、选择器

jQuery选择器支持ID,TagName,CSS1-CSS3的表达式(即支持用CSS选择器来选择元素)。

只需要将字符串传入jQuery()构造函数，就可以选择不同的DOM对象，然后处理成jQuery对象返回。

5、扩展性

为什么jQuery需要扩展性？

简单的说就是为了满足不同的开发需求。为了保证jQuery的通用性并同时保证代码简洁性（就是体积越小越好），jQuery仅实现了基础的方法和函数。但为了满足不同开发需求，留下了易于扩展的方法和接口。