本文阅读对象: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中级开发工程师了。

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

THE END

想要学习jQuery却不知从何开始?本文为你精选5个例子帮你快速成为jQuery大师的更多相关文章

  1. 好程序员web前端分享想要学习前端需要学那些课程

    好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...

  2. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  3. 快速开发 jQuery 插件的 10 大技巧(转)

    1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面.而方法可能应 ...

  4. 手把手带你快速入门jQuery(视频|资料,建议收藏!)

    jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的宗旨是 ...

  5. 想要学习Linux技术,先好好的读一本Linux书籍吧

    忘记你在使用windows时的使用习惯和使用思维.学习Linux,一定要适应Linux的命令行界面,因为命令行才是Linux的真正魅力所在,而X-window或着说桌面环境也只是运行在命令行模式下的一 ...

  6. 10个 jQuery 代码片段,可以帮你快速开发。

    转载自:http://mp.weixin.qq.com/s/mMstI10vqwu8PvUwlLborw 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而 ...

  7. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  8. 快速开发 jQuery 插件的 10 大技巧(转)

    转自:http://www.oschina.net/news/41776/jquery-10-tips 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模 ...

  9. jQuery上传插件Uploadify 3.2在.NET下的详细例子

    项目中要使用Uploadify 3.2来实现图片上传并生成缩略通的功能,特此记下来,以供各位参考! Uploadify下载地址:http://www.uploadify.com/download/ 下 ...

随机推荐

  1. CentOS7源码安装lamp

    环境介绍 虚拟机 : VMware Workstation 14 Pro 镜像 : CentOS Linux release 7.4.1708 (Core) 物理机 : windows 7 64位 防 ...

  2. JS操作css样式用法

    //html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...

  3. 在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题

    首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” 然后点击配置HTML语言的基础设置 然后在打开的界面中(右侧) 输入如下代码 { "editor.quickSugg ...

  4. python3基础(七)函数基础

    Function 函数是一段组织好的能够实现特定功能或者逻辑的代码块,函数代码在文件执行时读入内存并不执行,在调用函数时执行,简单来说是把一段代码封装给一个函数名(可以用变量的概念去理解,即把一段代码 ...

  5. 使用xUnit为.net core程序进行单元测试(上)

    一. 导读 为什么要编写自动化测试程序(Automated Tests)? 可以频繁的进行测试 可以在任何时间进行测试,也可以按计划定时进行,例如:可以在半夜进行自动测试. 肯定比人工测试要快. 可以 ...

  6. swiper插件的简单使用,实现图片轮播

    移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...

  7. 浅谈我的MongoDB学习(二)

    上一篇简单讲了mongodb的安装,mongo的windows服务安装,这样服务器重启windows服务会自动重启mongodb的server,然后我们就可以用客户端去管理数据了.mongodb客户端 ...

  8. 分布式架构ActiveMQ的安装与使用(单节点)

    具体内容请参考样例代码和视频教程: http://www.roncoo.com/course/view/85d6008fe77c4199b0cdd2885eaeee53   IP:192.168.4. ...

  9. bzoj:1656 [Usaco2006 Jan] The Grove 树木

    Description The pasture contains a small, contiguous grove of trees that has no 'holes' in the middl ...

  10. DP入门

    数塔HDU2084 #include <iostream> #include <algorithm> #include <cstdio> #include < ...