想要学习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中级开发工程师了。
下一步,你将会学习JavaScript面向对象编程(OOP),你将会感受到JavaScript这门语言的强大之处。
THE END
想要学习jQuery却不知从何开始?本文为你精选5个例子帮你快速成为jQuery大师的更多相关文章
- 好程序员web前端分享想要学习前端需要学那些课程
好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- 快速开发 jQuery 插件的 10 大技巧(转)
1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面.而方法可能应 ...
- 手把手带你快速入门jQuery(视频|资料,建议收藏!)
jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的宗旨是 ...
- 想要学习Linux技术,先好好的读一本Linux书籍吧
忘记你在使用windows时的使用习惯和使用思维.学习Linux,一定要适应Linux的命令行界面,因为命令行才是Linux的真正魅力所在,而X-window或着说桌面环境也只是运行在命令行模式下的一 ...
- 10个 jQuery 代码片段,可以帮你快速开发。
转载自:http://mp.weixin.qq.com/s/mMstI10vqwu8PvUwlLborw 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而 ...
- jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...
- 快速开发 jQuery 插件的 10 大技巧(转)
转自:http://www.oschina.net/news/41776/jquery-10-tips 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模 ...
- jQuery上传插件Uploadify 3.2在.NET下的详细例子
项目中要使用Uploadify 3.2来实现图片上传并生成缩略通的功能,特此记下来,以供各位参考! Uploadify下载地址:http://www.uploadify.com/download/ 下 ...
随机推荐
- 一个IC软件工程师的2017年终工作总结
相比2016年的波澜起伏,2017多了一份平静和清淡.不过,平静的生活下,总有一颗飞向远方的心. 在这一年将近结束的时候,总结一下自己的工作,生活和学习.也顺便展望一下未来的2018,看看有哪些 美好 ...
- thinkinginjava学习笔记05_访问权限
Java中访问权限等级从大到小依次为:public.protected.包访问权限(没有关键词).private: 以包访问权限为界限,public.protected分别可以被任意对象和继承的对象访 ...
- 简单搭建ES6的环境
一.兼容情况 说到ECMAScript6,顺便提一下ECMAScript5,先看一下ES5的兼容情况.ES5浏览器支持情况: Opera 11.60:Internet Explorer 9*:Fire ...
- SEO的基本概念 和 提交SITEMAP到搜索引擎
SEO的基本概念 SEO的基本概念 :我们接触的SEO主要就是做搜索引擎的优化,让搜索引擎更好地收录 我们的网站,不管是首页还是内页,都能有很好的收录和排名.那么我们经常用到的SEO的语句是什么呢?小 ...
- jsp分页
<%! int pataSize=5;// 每页多少数据 int totalCount =0; //数据共多少 int pageCount = 0; ///数据共有多少页 ...
- 跟我一起读postgresql源码(十)——Executor(查询执行模块之——Scan节点(下))
接前文跟我一起读postgresql源码(九)--Executor(查询执行模块之--Scan节点(上)) ,本篇把剩下的七个Scan节点结束掉. T_SubqueryScanState, T_Fun ...
- pycharm中进行带参数的调试
之前基本都是用print进行调试的,但今天程序运行完需要等很长时间,就尝试pycharm调试. 但是在运行程序需要传递参数,之前只会点击bug按钮直接运行程序,不知道调试的时候传入参数. 运行---& ...
- git 删除分支操作
删除分支时自己不能够在要删除的分支上 删除本地的某个分支 git branch -d branchname # 交互式删除分支 git branch -D branchname # 强制删除分支 删除 ...
- 搞懂spring事务
最近一个官网的项目,我在service层有两个添加数据的操作,很意外报错了,然后就研究到了事务 之前只是知道声明式事务和编程式事务,编程式的事务显得比较麻烦,一般都是使用声明式事务.. spring提 ...
- .Net程序员学用Oracle系列:视图、函数、存储过程、包
1.视图 在实际操作过程中,本人发现 Oracle 视图定义有一个缺陷,就是不大方便注释,每次写好的注释执行之后再打开视图定义所有注释就全都没了.后来我发现把注释写到末尾就不会被清除,但这样总感觉乖乖 ...