本篇教程介绍了jQuery学习路线图，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<

jQuery是什么
这个问题很重要，因为很多初学者心中想象的jQuery，或者说对jQuery的期望与jQuery的本质/初衷有较大出入，这就导致很多初学者学了相当长一段时间也不知道jQuery可以拿来怎么用，应该在什么地方用。
 
笔者对jQuery的理解： jQuery是DOM（文档对象模型）操作的一个JavaScript函数库。这是jQuery最基本的功能，当然，除了这个最基本的功能之外，jQuery还提供了ajax、事件等其他模块的支持，另外，还有jQuery UI，一个基于jQuery基本库专门做UI控件的。
 
DOM操作可以简单的理解为动态的修改页面的HTML元素，比如：
1. 事件绑定，比如按钮的click事件；
2. 向页面html添加新的html元素，修改html元素（属性值、样式等等），删除html元素；
 
于是，只要会使用jQuery进行DOM操作，就可以说你已经学会jQuery了。
 
接下来，本文会以5个具有难度阶梯的例子，告诉你应该如何一步一步去学习jQuery，帮助初学者避免在面对学习jQuery时无从下手的尴尬。
 
最重要的例子：第一个例子——动态表单
先看产品原型图：
 
需求：用户可以动态将一个employee信息加到下方的列表，包含姓名、性别、部门。employee列表中的每一项允许删除，删除之后，编号自动重新计算。
 
为什么说这个例子是最重要的例子呢？
 
是因为该例子是笔者在学习jQuery的时候，第一个让我有一种“豁然开朗”的感觉的例子。
 
所以，当你独立完成该例子的时候，jQuery世界的大门才真正为你敞开。
 
例子2：TAB控件练习*2


简单的显示/隐藏的练习，虽然简单，但是非常实用，因为使用jQuery的过程中有很多时候都在做显示隐藏。
 
例子3：选中状态控制

通过设置/取消 class来控制样式，非常简单，非常实用。
 
例子4：下拉列表级联控制

黑色区域为数据源部分。本例子主要练习jQuery data方法，以及动态控制下拉列表。难度较前2个例子难一点。
 
例子5：弹窗控件练习

写一个控件，通过传入参数弹出一个弹窗。黑色区域代码为调用的示例代码（调用者将会这么调用你的控件）。
 
当你可以独立完成这个弹窗控件的时候，你就已经是jQuery中级开发工程师了。
 
如何从零开始学习jQuery
1. 先把jQuery中文参考手册阅读一遍，注意阅读的重点放在选择器、DOM操作，其他知识点全部略过；
2. 开始写代码，完成本文的第一个例子。
3. 完成本文的第2至5个例子。
 
 
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！