产品特色

内容简介

　　使用jQuery可以用更少的时间完成更多工作。Web开发和移动开发已经成为主流，jQuery在Web和移动网页方面的占有率已经达到70.8%，这给学习jQuery的读者提供了更多工作机会。本书是一本带领读者入门的jQuery实战书。

　　全书分为4部分：第1部分介绍jQuery开发的基础，包括环境搭建，必须了解的JavaScript基础，jQuery操作HTML、CSS、事件、动画等；第2部分介绍jQuery的插件，包括自定义插件、UI插件和一些常用插件；第3部分介绍jQuery在移动网页方面的开发框架jQuery Mobile；第4部分通过3个完整的项目案例让读者完善前面的学习，并正式开发属于自己的项目。

　　本书内容精练、重点突出、实例丰富、讲解通俗，是广大网页或移动Web设计人员和前端开发人员必备的参考书，同时非常适合大中专院校师生参考阅读，也可作为高等院校计算机及相关培训机构的教材。

作者简介

刘鑫,资深JAVA语言学者,富有多年的开发及教学经验。

目录

第一篇 jQuery基础
第1章 欢迎进入移动开发的世界 3
1.1 下载jQuery 3
1.2 编写第一个包含jQuery库的程序 5
1.3 jQuery库的核心方法$() 6
1.4 jQuery库的选择器 7
1.5 jQuery代码的注释 9
1.6 调试jQuery程序 10
1.7 小结 14
第2章 学习jQuery 必会的JavaScript基础 15
2.1 JavaScript的数据类型 15
2.2 JavaScript的变量 17
2.3 JavaScript的方法和参数 17
2.4 JavaScript的上下文Context 18
2.5 JavaScript的Callback 18
2.6 小结 19
第3章 jQuery操作HTML 20
3.1 获取或设置元素的内容 20
3.2 获取或设置元素的属性 22
3.3 在页面中添加元素 24
3.4 从页面中删除元素 27
3.5 通过for…of为页面中的元素循环指定ID 29
3.6 利用Ajax实现网页的get请求 31
3.7 利用Ajax直接执行返回的JS代码 34
3.8 一切Ajax都是基于$.ajax() 35
3.9 跨域的AJAX-JSONP 37
3.10 JSONP在jQuery中的应用 39
3.11 实战1：网页中的图片预览 41
3.12 实战2：利用Ajax实现微博的实时更新 44
3.13 小结 46
第4章 jQuery操作CSS 47
4.1 添加或删除样式 47
4.2 样式的切换 48
4.3 获取或设置CSS样式 49
4.4 更改元素或窗口的大小 51
4.5 实战：网页链接的提示 52
4.6 小结 54
第5章 jQuery操作事件 55
5.1 什么是事件 55
5.2 jQuery中的事件 55
5.3 页面的初始化事件 57
5.4 绑定事件 59
5.5 新事件绑定on() 62
5.6 移除事件绑定 63
5.7 新移除事件绑定off() 64
5.8 切换事件 66
5.9 表单事件 67
5.10 实战：表单的验证 69
5.11 小结 72
第6章 jQuery操作动画 73
6.1 基本动画 73
6.2 可折叠的列表 74
6.3 按钮的淡入淡出 76
6.4 停止动画 77
6.5 自定义动画 78
6.6 实战：多样式动画 79
6.7 小结 80
第二篇 jQuery插件
第7章 jQuery插件 83
7.1 什么是jQuery插件 83
7.2 常用的插件网站 87
7.3 jQuery的插件类型 89
7.4 对象级别的插件开发 89
7.5 类级别的插件开发 92
7.6 实战：用第三方插件创建自己的网站 95
7.7 小结 102
第8章 jQuery官方UI插件 103
8.1 jQuery UI插件是官方提供的用户界面 103
8.2 下载jQuery UI插件 104
8.3 拖动组件Draggable的使用 105
8.4 拖放组件Droppable的使用 106
8.5 实战：使用拖动效果模拟Windows系统“回收站” 108
8.6 实现页面中的进度条 112
8.7 实现页面中的滑动条 114
8.8 实现页面中的日历 121
8.9 实现页面导航的手风琴效果 128
8.10 实现页面中的各种对话框特效 130
8.11 实现幻灯和分页特效 135
8.12 小结 141
第9章 jQuery多媒体插件 142
9.1 图表应用 142
9.2 视频应用 148
9.3 地图应用 151
9.4 实战在线地图 156
9.5 小结 160
第三篇 jQuery移动开发
第10章 jQuery Mobile移动开发 163
10.1 下载jQuery Mobile 163
10.2 使用Dreamweaver开发jQuery Mobile 164
10.3 创建第一个jQuery Mobile文件 165
10.4 测试jQuery Mobile 165
10.5 选择页面中的元素 169
10.6 设置页面中元素的属性 170
10.7 jQuery Mobile中的控件 170
10.8 使用按钮实现菜单界面 172
10.9 使用表单做一个手机版QQ登录 175
10.10 使用列表做一个类贴吧的应用 180
10.11 使用对话框实现一个相册 183
10.12 实战：实现电子书阅读器 186
10.13 小结 188
第11章 开发移动博客 189
11.1 项目规划 189
11.2 主界面设计 190
11.3 文章列表的设计 193
11.4 文章内容页的实现 197
11.5 文章类的设计 200
11.6 测试环境的搭建 202
11.7 数据库的设计 207
11.8 内容页功能的实现 213
11.9 文章列表的实现 217
11.10 首页的实现 222
11.11 小结 223



第四篇 jQuery实战
第12章 jQuery+HTML 5实现文件拖动上传 227
12.1 认识FileDrop.js插件 228
12.1.1 下载FileDrop.js插件 228
12.1.2 使用插件实现文件拖拽上传 231
12.2 开发图片拖拽上传Web应用 235
12.2.1 HTML 5文件上传功能 235
12.2.2 图片拖拽上传HTML代码 236
12.2.3 图片拖拽上传CSS代码 237
12.2.4 图片拖拽上传JS代码 239
12.2.5 图片拖拽上传服务器端PHP代码 241
12.2.6 图片拖拽上传Web应用最终效果 242
12.3 小结 243
第13章 jQuery+HTML 5实现视频播放器 244
13.1 认识MediaElement.js插件 245
13.1.1 下载音视频播放器插件 245
13.1.2 开发一个简单的播放器应用 248
13.1.3 使用MediaElement.js插件模仿Windows Media Player 252
13.2 实现在线播放器 254
13.2.1 在页面中添加MediaElement.js 254
13.2.2 构建播放器页面布局 254
13.2.3 播放器页面初始化 255
13.3 小结 257
第14章 jQuery+HTML 5实现绘图程序 258
14.1 准备jquery.deviantartmuro绘图插件 259
14.1.1 下载jquery.deviantartmuro绘图插件 259
14.1.2 参数说明 265
14.1.3 使用jquery.deviantartmuro绘图插件开发Sandbox绘图应用 268
14.2 基于HTML 5的Canvas绘图初步应用 271
14.2.1 Canvas简介 271
14.2.2 Canvas技术基本知识 271
14.3 Canvas技术初步应用 273
14.3.1 Canvas技术绘制矩形应用 273
14.3.2 Canvas技术清除矩形区域应用 274
14.3.3 Canvas技术绘制圆弧应用 275
14.3.4 Canvas技术绘制路径应用 276
14.3.5 Canvas技术绘制线段应用 278
14.3.6 Canvas技术绘制贝塞尔曲线与二次样条曲线应用 279
14.4 Canvas技术综合应用——绘制花样 280
14.5 Canvas综合应用——绘制复杂图样 281
14.6 Canvas综合应用——图形变换 283
14.7 小结 286

精彩书摘

　　第13章

　　jQuery+HTML5实现视频播放器

　　以往很多喜欢上网看视频、玩游戏的网友经常抱怨不爽，因为网上好多视频和游戏都需要安装Flash插件，并且速度非常慢。HTML5标准的出现解决了这一难题，HTML5提供了音频视频的标准接口，实现了无须任何插件支持，只需用户浏览器支持相应的HTML5标签即可。难怪业内都坚信HTML5标准是Flash的终结者！目前，IE9+、Safari、Firefox和Chrome等主流浏览器都支持HTML5标准，用户可以免除Flash插件安装的烦琐而直接在网页中播放音视频。

　　图13.1是Youtube视频网站的HTML5视频播放器页面。

　　图13.1HTML5视频播放器

　　本章主要内容

　　?使用MediaElement.js音视频播放器插件

　　?熟悉HTML5音视频技术

　　?制作HTML5页面音视频播放器

　　13.1认识MediaElement.js插件

　　MediaElement.js音视频播放器插件是一个HTML5音频和视频的解决方案，该插件支持使用HTML5的音频和视频标签及CSS生成的音视频播放器。对于老的浏览器，MediaElement.js插件使用自定义的Flash或Silverlight播放器模拟HTML5音视频技术。总体上，MediaElement.js是一款支持众多应用的音视频播放器插件，包括jQuery、Wordpress、Drupel、Joomla等，同时完全兼容目前主流浏览器（IE9+、Safari、Firefox和Chrome等）。

　　13.1.1下载音视频播放器插件

　　MediaElement.js音视频播放器插件的官方网址如下：

　　http://www.mediaelementjs.com/

　　在MediaElement.js插件的官方网站，用户可以看到MediaElement.js插件的产品介绍、样例演示链接、源代码下载链接、开发向导链接、官方博客链接、支持文档以及网站版权信息等内容，如图13.2所示。

　　图13.2查看产品介绍、样例演示链接等信息

　　用户继续向下浏览，可以看到MediaElement.js插件的特性介绍、浏览器支持与Demo演示链接等信息，如图13.3所示。

　　图13.3查看特性介绍、浏览器支持等信息

　　目前，选择MediaElement.js音视频播放器插件是一个很不错的选择。MediaElement.js插件具有以下优秀特性，全方位支持设计人员开发：

　　?自由联盟和开放源码支持，无许可限制。

　　?上手容易，安装部署简单快捷。

　　?使用纯HTML与CSS开发。

　　?完全支持HTML5标准的

　　?广泛的平台支持，支持多编解码器、跨浏览器和跨平台。

　　?全面支持WordPress、Drupal、Joomla、jQuery、BlogEngine.NET、RubyGem、Plone、Typo3等流行Web技术。

　　?为早期浏览器的Adobe?Flash?标准与Silverlight技术提供一致的API接口。

　　?可扩展的体系结构，方便开发人员完善改进。

　　?积极和不断增长地为开源社区提供支持。

　　?提供全面的文档和入门指南。

　　MediaElement.js音视频播放器插件具有很好的跨浏览器支持性，全面兼容目前各款主流浏览器与设备。下面是浏览器支持情况一览。

　　?Windows：Firefox、Chrome、Opera、Safari、IE9+。

　　?WindowsPhone：WindowsPhoneBrowser。

　　?iOS：MobileSafari、iPad、iPhone、iPodTouch。

　　?Android：Android2.3Browser+。

　　对于MediaElement.js音视频播放器插件，官方网站还提供了相当丰富的API文档与样例说明，具体如图13.4所示。

　　图13.4查看API文档与样例说明

　　用户从MediaElement.js插件官方网站可以下载一个大约10MB的源文件压缩包，编写本书时，最新版文件名为johndyer-mediaelement-2.13.2.zip。用户解压缩后可以得到MediaElement.js插件完整的源代码，包括所需jQuery框架支持的类库文件、MediaElement.js插件的相关类库文件以及MediaElement.js插件的全部资源文件。

　　同时，MediaElement.js插件开发方还将其源代码提交到了GitHub资源库，便于设计人员学习交流使用。MediaElement.js插件的GitHub资源库链接地址如下：

　　https://github.com/johndyer/mediaelement/

　　MediaElement.js插件的GitHub页面如图13.5所示。

　　图13.5MediaElement.js音视频播放器插件GitHub页面

　　……

前言/序言

　　前言

　　jQuery是高效、精简并且功能丰富的JavaScript工具库。jQuery提供的API易于使用且兼容众多浏览器，让HTML文档遍历和操作、事件处理、动画和Ajax操作等更加简单。如果你想学习Web开发或移动开发框架，那么非jQuery莫属。jQuery跨平台特性既减少了开发人员的工作量，又能让新手快速入门。

　　本书是一本从零起步的jQuery入门书，无论你是否有HTMLCSSJavaScript基础，都能很好地上手学习，只要多练习、多写代码，看完本书就能够具备实际开发Web和移动Web项目的能力。

　　本书的编写特点

　　?本书无论是基础理论知识的介绍，还是综合案例应用的开发，都从实际应用角度出发，讲解细致、分析透彻。

　　?深入浅出、轻松易学。以示例为主线，激发读者的阅读兴趣，让读者能够真正学习到jQuery最实用、最前沿的技术。

　　?技术新颖、最新版本、与时俱进，较为全面地覆盖时下热门的jQuery技术。

　　?合理的章节安排，先把环境搭建好，然后从基础的jQuery操作HTML元素入手，进而学习jQuery的一些操作特性，如Ajax、动画、事件、CSS等，最后介绍jQueryMobile在移动方面的开发基础。

　　本书的内容安排

　　本书共分4篇14章，内容从jQuery基础到jQuery插件，再到jQueryMobile。

　　第一篇jQuery基础（第1章~第6章）

　　首先手把手教读者搭建jQuery的开发环境，然后掌握一些必要的JavaScript基础，进而学习jQuery操作HTML、jQuery操作CSS的快捷方式，最后把jQuery的核心特性——事件和动画利用示例的方式逐步演示。

　　第二篇jQuery插件（第7章~第9章）

　　jQuery插件是jQuery之所以流行的最大特色。jQuery插件不只提供jQueryUI插件，因为其开源的特性，很多公司和个人也贡献了很多有意思且能提高开发效率的插件，如多媒体插件能帮助我们更好地开发绚丽多彩的网页和移动界面。

　　第三篇jQuery移动开发（第10章~第11章）

　　移动网页开发已经普及，企业的网站需要支持更多平台，jQueryMobile是跨平台方案的首选。本篇重点介绍jQuery移动开发的基础，通过一个完整的移动网页让读者学习jQueryMobile的选择器、事件、移动开发、APP布局等。

　　第四篇jQuery实战（第12章~第14章）

　　通过3个案例详细解析jQuery开发中的各种步骤、代码和技术，包括插件的使用、界面的设计、数据库的连接等。

　　本书面对的读者

　　?网页设计入门者

　　?网页开发入门者

　　?网页美工人员

　　?移动设备网页开发者

　　?大、中专院校的学生

　　?各种IT培训学校的学生

　　?网站后台开发人员

　　?前端开发入门者

　　?网站建设与网页设计的相关威客兼职人员

　　本书由刘鑫编写，其他参与的人员有张泽娜、曹卉、林江闽、林龙、李阳、宋阳、王刚、杨超、张光泽、赵东、李玉莉、刘岩、李雷霆、王小辉。

　　编者

　　2017年4月