想要学习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

原文地址:https://www.cnblogs.com/leotsai/p/jquery-get-started-5-steps.html