本文阅读对象: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. 一个IC软件工程师的2017年终工作总结

    相比2016年的波澜起伏,2017多了一份平静和清淡.不过,平静的生活下,总有一颗飞向远方的心. 在这一年将近结束的时候,总结一下自己的工作,生活和学习.也顺便展望一下未来的2018,看看有哪些 美好 ...

  2. thinkinginjava学习笔记05_访问权限

    Java中访问权限等级从大到小依次为:public.protected.包访问权限(没有关键词).private: 以包访问权限为界限,public.protected分别可以被任意对象和继承的对象访 ...

  3. 简单搭建ES6的环境

    一.兼容情况 说到ECMAScript6,顺便提一下ECMAScript5,先看一下ES5的兼容情况.ES5浏览器支持情况: Opera 11.60:Internet Explorer 9*:Fire ...

  4. SEO的基本概念 和 提交SITEMAP到搜索引擎

    SEO的基本概念 SEO的基本概念 :我们接触的SEO主要就是做搜索引擎的优化,让搜索引擎更好地收录 我们的网站,不管是首页还是内页,都能有很好的收录和排名.那么我们经常用到的SEO的语句是什么呢?小 ...

  5. jsp分页

    <%!    int pataSize=5;// 每页多少数据    int totalCount =0; //数据共多少    int pageCount = 0; ///数据共有多少页    ...

  6. 跟我一起读postgresql源码(十)——Executor(查询执行模块之——Scan节点(下))

    接前文跟我一起读postgresql源码(九)--Executor(查询执行模块之--Scan节点(上)) ,本篇把剩下的七个Scan节点结束掉. T_SubqueryScanState, T_Fun ...

  7. pycharm中进行带参数的调试

    之前基本都是用print进行调试的,但今天程序运行完需要等很长时间,就尝试pycharm调试. 但是在运行程序需要传递参数,之前只会点击bug按钮直接运行程序,不知道调试的时候传入参数. 运行---& ...

  8. git 删除分支操作

    删除分支时自己不能够在要删除的分支上 删除本地的某个分支 git branch -d branchname # 交互式删除分支 git branch -D branchname # 强制删除分支 删除 ...

  9. 搞懂spring事务

    最近一个官网的项目,我在service层有两个添加数据的操作,很意外报错了,然后就研究到了事务 之前只是知道声明式事务和编程式事务,编程式的事务显得比较麻烦,一般都是使用声明式事务.. spring提 ...

  10. .Net程序员学用Oracle系列:视图、函数、存储过程、包

    1.视图 在实际操作过程中,本人发现 Oracle 视图定义有一个缺陷,就是不大方便注释,每次写好的注释执行之后再打开视图定义所有注释就全都没了.后来我发现把注释写到末尾就不会被清除,但这样总感觉乖乖 ...