想要学习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/ 下 ...
随机推荐
- CentOS7源码安装lamp
环境介绍 虚拟机 : VMware Workstation 14 Pro 镜像 : CentOS Linux release 7.4.1708 (Core) 物理机 : windows 7 64位 防 ...
- JS操作css样式用法
//html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...
- 在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题
首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” 然后点击配置HTML语言的基础设置 然后在打开的界面中(右侧) 输入如下代码 { "editor.quickSugg ...
- python3基础(七)函数基础
Function 函数是一段组织好的能够实现特定功能或者逻辑的代码块,函数代码在文件执行时读入内存并不执行,在调用函数时执行,简单来说是把一段代码封装给一个函数名(可以用变量的概念去理解,即把一段代码 ...
- 使用xUnit为.net core程序进行单元测试(上)
一. 导读 为什么要编写自动化测试程序(Automated Tests)? 可以频繁的进行测试 可以在任何时间进行测试,也可以按计划定时进行,例如:可以在半夜进行自动测试. 肯定比人工测试要快. 可以 ...
- swiper插件的简单使用,实现图片轮播
移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...
- 浅谈我的MongoDB学习(二)
上一篇简单讲了mongodb的安装,mongo的windows服务安装,这样服务器重启windows服务会自动重启mongodb的server,然后我们就可以用客户端去管理数据了.mongodb客户端 ...
- 分布式架构ActiveMQ的安装与使用(单节点)
具体内容请参考样例代码和视频教程: http://www.roncoo.com/course/view/85d6008fe77c4199b0cdd2885eaeee53 IP:192.168.4. ...
- bzoj:1656 [Usaco2006 Jan] The Grove 树木
Description The pasture contains a small, contiguous grove of trees that has no 'holes' in the middl ...
- DP入门
数塔HDU2084 #include <iostream> #include <algorithm> #include <cstdio> #include < ...