想要学习jQuery却不知从何开始？本文为你精选5个例子帮你快速成为jQuery大师

本文阅读对象：WEB前端开发初学者、jQuery初学者、JavaScript初学者

本文目的：jQuery真正入门、快速入门、快速搞清楚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个例子。

 

 

下一步，你将会学习JavaScript面向对象编程（OOP），你将会感受到JavaScript这门语言的强大之处。

 

THE END