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

咱们知道，无论学习任何一门框架，了解其设计的理念、目的、整体的结构及核心特性对咱们使用和后续的深刻理解框架都是有很大的帮助的。所以在这里先梳理一下本人对jQuery框架的一些理解。

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

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

如何实现

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

• 属性操做

　　如class,style,attribute等

• 元素操做

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

• 内容操做

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

• 样式操做

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

• 事件操做

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

• 通讯操做

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

jQuery 核心特性

一、jQuery()或$()

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

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

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

二、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元素解析完成后就执行代码

三、链式写法

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

四、选择器

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

只须要将字符串传入jQuery()构造函数，就能够选择不一样的DOM对象，而后处理成jQuery对象返回。

五、扩展性

为何jQuery须要扩展性？

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