作者：巅峰卓越
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
jQuery Mobile从入门到精通试读：
前言
本书是专门为初学者量身打造的一本编程学习用书，由知名计算机图书策划机构“巅峰卓越”精心策划而成。
本书主要面向jQuery Mobile的初学者和爱好者，旨在帮助读者掌握jQuery Mobile的基础知识，了解开发技巧并积累一定的项目实战经验。
为什么要写这样一本书
荀子曰:不闻不若闻之,闻之不若见之,见之不若知之,知之不若行之。
实践对于学习的重要性由此可见一斑。纵观当前编程图书市场，理论知识与实践经验的脱节，是很多jQuery Mobile图书的写照。为了杜绝这一现象，本书立足于实践，从项目开发的实际需求入手，将理论知识与实际应用相结合。目标就是让初学者能够快速成长为初级程序员，并获得一定的项目开发经验，从而在职场中拥有一个高起点。
jQuery Mobile的最佳学习路线
本书总结了作者多年的教学实践经验，为读者设计了最佳的学习路线。
本书特色
零基础、入门级的讲解
无论读者是否从事计算机相关行业，是否接触过jQuery Mobile，都能从本书中找到最佳起点。
超多、实用、专业的范例和项目
本书彻底摒弃枯燥的理论和简单的说教，注重实用性和可操作性，结合实际工作中的范例，逐一讲解jQuery Mobile的各种知识和技术。最后，还以实际开发项目来总结本书所学内容，帮助读者在实战中掌握知识，轻松拥有项目经验。
随时检测自己的学习成果
每章首页罗列了“本章要点”，以便读者明确学习方向。每章最后的“实战练习”则根据所在章的知识点精心设计而成，读者可以随时自我检测，巩固所学知识。
细致入微、贴心提示
本书在讲解过程中使用了“提示”“注意”“技巧”等小栏目，帮助读者在学习过程中更清楚地理解基本概念，掌握相关操作，并轻松获取实战技能。
超值光盘
10小时全程同步教学录像
涵盖本书所有知识点，详细讲解每个范例及项目的开发过程及关键点，帮助读者更轻松地掌握书中所有的jQuery Mobile知识。
超多王牌资源大放送
赠送大量超值资源，包括7小时HTML5 + CSS + JavaScript实战教学录像、157个HTML+CSS+JavaScript前端开发实例、571个典型实战模块、184个Android开发常见问题/实用技巧及注意事项、Android Studio实战电子书、CSS3从入门到精通电子书及案例代码、HTML5从入门到精通电子书及案例代码、jQuery Mobile典型应用电子书及配套教学录像，以及配套的教学用PPT课件等。
读者对象
没有任何移动开发基础的初学者和编程爱好者
有一定的移动Web开发基础，想精通jQuery Mobile的人员
有一定的移动Web开发基础，缺乏jQuery Mobile实战经验的从业者
大专院校及培训学校相关专业的老师和学生
光盘使用说明
01. 光盘运行后会首先播放带有背景音乐的光盘主界面，其中包括【配套源码】、【配套视频】、【配套PPT】、【赠送资源】和【退出光盘】5个功能按钮。
02. 单击【配套源码】按钮，可以进入本书源码文件夹，里面包含了“配套源码”和“实战练习”两个子文件夹，如下左图所示。
03. 单击【配套视频】按钮，可在打开的文件夹中看到本书的配套教学录像子文件夹，如下右图所示。
04. 单击【配套PPT】按钮，可以查看本书的配套教学用PPT课件，如下左图所示。
05. 单击【赠送资源】按钮，可以查看本书赠送的超值学习资源，如下右图所示。
06. 单击【退出光盘】按钮，即可退出本光盘系统。
创作团队
本书由巅峰卓越编著，参加资料整理的人员有周秀、付松柏、邓才兵、钟世礼、谭贞军、张加春、王教明、万春潮、郭慧玲、侯恩静、程娟、王文忠、陈强、何子夜、李天祥、周锐、朱桂英、张元亮、张韶青、秦丹枫等。
由于编者水平有限，纰漏和不尽如人意之处在所难免，诚请读者提出意见或建议，以便修订并使之更臻完善。若读者在学习过程中遇到困难或疑问，或有任何建议，可发送电子邮件至 zhangyi@ptpress. com.cn。编者2016年10月第0章移动Web开发学习指南
本章教学录像：25 分钟
移动Web程序是指能够在智能手机、平板电脑、电子书阅读器等可移动设备中完整运行的Web程序。和传统桌面式Web程序相比，移动Web要求程序更加简单且高效，而且具备传统桌面Web程序所没有的硬件优势，如GPS定位、传感器应用等。本章将简要介绍开发移动Web应用程序的基础知识，为读者步入本书后面知识的学习打下基础。
本章要点（已掌握的在方框中打钩）
Web标准开发技术
移动Web 开发概览
移动Web 开发必备技术
移动Web 开发和 jQuery Mobile 学习路线图0.1 Web标准开发技术
本节教学录像：5分钟
互联网自从推出以来，因其强大的功能和娱乐性而深受广大用户的青睐。随着硬件技术的发展和进步，各网络站点也纷纷采用不同的软件技术来实现不同的功能。这样，在互联网这个宽阔的舞台上，站点页面技术变得更加成熟并稳定，越来越以更加绚丽的效果展现在广大用户面前。为了保证Web程序能够在不同设备中的不同浏览器中运行，国际标准化组织制定了Web标准。顾名思义， Web标准是所有站点在建设时必须遵循的一系列硬性规范。因为从页面构成来看，网页主要由3部分组成，即结构（Structure）、表现（Presentation）和行为（Behavior），所以对应的Web标准以下3个方面构成。0.1.1 结构化标准语言
当前使用的结构化标准语言是HTML和XHTML，下面对这两种语言进行简要介绍。
HTML
HTML是Hyper Text Markup Language（超文本标记语言）的缩写，是构成Web页面的主要元素，是用来表示网上信息的符号标记语言。通过HTML，可以将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML翻译成可以识别的信息，这就是所见到的网页。HTML语言是网页制作的基础，是网页设计初学者必掌握的内容。
XHTML
XHTML是eXtensible Hyper Text Markup Language（可扩展超文本标记语言）的缩写，是根据XML标准建立起来的标识语言，是由HTML向XML的过渡性语言。0.1.2 表现性标准语言
目前的表现性语言是本书所讲的CSS。CSS是Cascading Style Sheets（层叠样式表）的缩写。当前最新的CSS规范是W3C于2001年5月23日推出的CSS3。通过CSS技术可以对网页进行布局，控制网页的表现形式。CSS可以与XHTML语言相结合，实现页面表现和结构的完整分离，提高站点的使用性和维护效率。0.1.3 行为标准
当前的行为标准是DOM和ECMAScript。DOM是Document Object Model（文档对象模型）的缩写。根据W3C DOM规范，DOM是一种与浏览器、平台和语言的接口，使得用户可以访问页面其他的标准组件。简单理解，DOM解决了NetsCaped的JavaScript和Microsoft的JScript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。从本质上讲，DOM是一种文档对象模型，是建立在网页和Script及程序语言之间的桥梁。
ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript）。
上述Web标准间的相互关系如图0-1所示。图0-1 Web标准结构关系图
上述标准大部分由W3C组织起草和发布，也有一些是其他标准组织制定的标准，比如ECMA的ECMAScript标准。
注意
从上述内容中可以看出，Web标准并不是某一技术的规范，而是构成页面三大要素的规范的集合体。只有充分对上述标准分别了解并融会贯通，才能掌握其中的真谛。0.2 移动Web开发概览
本节教学录像：12分钟
说起移动Web，就不得不说传统桌面Web。传统桌面Web是指在台式机和笔记本电脑中运行的Web程序。随着互联网技术的兴起和发展，人们所说的Web通常就是指桌面Web。而随着近年来智能手机和平板电脑等可移动设备的发展和兴起，人们纷纷在可移动设备中浏览网页，这就推动了移动Web技术的发展。本节详细讲解主流移动平台和移动Web的基本特点。0.2.1 主流移动平台介绍
在市面中有很多智能手机系统，形成了百家争鸣的局面。但是纵观智能手机的发展史，最受大家欢迎的当属微软、塞班、黑莓、苹果和Android。接下来对以上5个主流移动平台进行简要介绍。（1）Symbian（塞班）
Symbian作为昔日智能手机的王者，在2005年至2010年曾独领风骚，街上很多人拿的都是诺基亚的Symbian手机。N70、N73、N78、N97，诺基亚N系列曾经被称为“N=无限大”的手机。对硬件要求的水平低、操作简单、省电、软件多是Symbian系统手机的重要特点。
在国内软件开发市场内，基本每一个软件都会有对应的塞班手机版本。而塞班开发之初的目标是要保证在较低资源的设备上能长时间稳定可靠地运行，这导致了塞班的应用程序开发有着较为陡峭的学习曲线，开发成本较高。但是程序的运行效率很高。比如5800的128 MB的RAM，后台可以同时运行10几个程序而操作流畅（多任务功能是特别强大的）。即使几天不关机，它的剩余内存也能保持稳定。
由于对新兴的社交网络和Web 2.0内容支持欠佳，塞班占智能手机的市场份额日益萎缩。2010年末，其市场占有量已被Android超过。自2009年底开始，摩托罗拉、三星电子、LG、索尼爱立信等各大厂商纷纷宣布终止塞班平台的研发，转而投入Android领域。2011年初，诺基亚宣布将与微软成立战略联盟，推出基于Windows Phone的智能手机，从而在事实上放弃了经营多年的塞班，塞班退市已成定局。（2）Android
Android一词最早出现于法国作家利尔亚当在1886年发表的科幻小说《未来夏娃》中，里面将外表像人的机器起名为Android。Android机型数量庞大，简单易用，相当自由的系统能让厂商和客户轻松地定制各样的ROM，定制各种桌面部件和主题风格。简单而华丽的界面得到广大客户的认可，对手机进行刷机也是不少Android用户津津乐道的事情。
可惜Android版本数量较多，市面上同时存在着1.6、2.0、2.1、2.2、2.3等各种版本的Android系统手机，应用软件对各版本系统的兼容性对程序开发人员是一种不小的挑战。同时，开发门槛低，导致应用数量虽然很多，但是应用质量参差不齐，甚至出现不少恶意软件，导致一些用户受到损失。同时Android没有对各厂商在硬件上进行限制，导致一些用户在低端机型上体验不佳。另外，因为Android的应用主要使用Java语言开发，其运行效率和硬件消耗一直是其他手机用户所诟病的地方。（3）iOS
iOS作为苹果移动设备iPhone和iPad的操作系统，在App Store的推动之下，成为了世界上引领潮流的操作系统之一。原本这个系统名为“iPhone OS”，直到2010年6月7日，WWDC大会上宣布改名为“iOS”。iOS的用户界面的概念基础是能够使用多点触控直接操作。控制方法包括滑动、轻触开关及按键。与系统交互包括滑动（Swiping）、轻按（Tapping）、挤压（Pinching,通常用于缩小）及反向挤压（Reverse Pinching or Unpinching，通常用于放大）。此外，通过其自带的加速器，可以令其旋转设备改变其y轴以令屏幕改变方向，这样的设计令iPhone更便于使用。
作为应用数量最多的移动设备操作系统，iOS优秀的系统设计以及严格的App Store，加上强大的硬件支持以及内置的Siri语音助手，无疑使得用户体验得到更大的提升，感受科技带来的好处。（4）Windows Phone
早在2004年，微软就开始以“Photon”的计划代号研发Windows Mobile的一个重要版本更新，但进度缓慢，最后整个计划被取消了。直到2008年，在iOS和Android的冲击之下，微软才重新组织了Windows Mobile的小组，并继续开发一个新的移动操作系统。Windows Phone，作为Windows Mobile的继承者，把网络、个人电脑和手机的优势集于一身，让人们可以随时随地享受到想要的体验。其内置的Office办公套件和Outlook，使得办公更加有效和方便。（5）Blackberry OS（黑莓）
Blackberry系统，即黑莓系统，是加拿大Research In Motion（RIM）公司推出的一种无线手持邮件解决终端设备的操作系统，由RIM自主开发。它和其他手机终端使用的Symbian、Windows Mobile、iOS等操作系统有所不同。Blackberry系统的加密性能更强，更安全。安装有Blackberry系统的黑莓机，指的不单单是一台手机，而是由RIM公司所推出，包含服务器（邮件设定）、软件（操作接口）以及终端（手机）大类别的Push Mail实时电子邮件服务。
黑莓系统稳定性非常优秀，其独特定位也深得商务人士青睐。可是它也因此在大众市场上得不到优势，国内用户和应用资源也较少。0.2.2 移动Web的特点
其实，移动Web和传统的Web并没有本质的区别，都需要Web标准制定的开发规范，都需要利用静态网页技术、脚本框架、样式修饰技术和程序联合打造出的应用程序。无论是开发传统桌面Web程序还是移动Web应用程序，都需要利用HTML、CSS、JavaScript和动态Web开发技术（如PHP、JSP、ASP.NET等）等技术。
移动Web是在传统的桌面Web的基础上，根据手持移动终端资源有限的特点，经过有针对性的优化，解决了移动终端资源少和Web浏览器性能差的问题。和传统Web相比，移动Web的主要特点如下。（1）随时随地
因为智能手机和平板电脑等设备都是可移动设备，所以用户可以利用这些设备随时随地浏览运行的移动Web程序。（2）位置感应
因为智能手机和平板电脑等可移动设备具备GPS定位功能，所以可以在这些设备中创建出具有定位功能的Web程序。（3）传感器
因为智能手机和平板电脑等可移动设备内置了很多传感器，如温度传感器、加速度传感器、湿度传感器、气压传感器和方向传感器等，所以可以创造出气压计、湿度仪器等Web程序。（4）量身定制的屏幕分辨率
因为市面中的智能手机和平板电脑等可移动设备的产品种类繁多，屏幕的大小和分辨率也不尽相同，所以在开发移动Web程序时，需要考虑不同屏幕分辨率的兼容性问题。（5）高质的照相和录音设备
因为智能手机和平板电脑等可移动设备具有摄像头和麦克风等硬件设备，所以可以开发出和硬件相结合的Web程序。
在当前Web设计应用中，移动Web的内容应当包括如下特点。
简短：设备越小，单次下载的内容就应当越简短。因此，在iPad或桌面电脑上可能一次性下载完的一个整页的文章，在功能手机上下载时应当分割为几部分下载，或仅仅下载标题。
直接：要在小型设备上迅速吸引读者的注意力，因此所有与主题无关的内容都应删除。
易用：在智能手机上单击返回键比填写表单要容易得多。因此要让移动内容，特别是针对小型设备的移动内容尽可能简单易用。
专注于用户需求：设备越小，越该注意仅向用户提供他们所需的最基本的功能。另外，不要只考虑需要移除的内容，还应当考虑在页面上加入什么样的功能，以使移动用户的任务处理更为便捷。
可以加入移动页面的功能包括以下方面。
回到首页链接：方便用户随时可以返回首页。
电子邮件链接：加入链接让访问者可以将页面的某些部分邮寄给自己或其他人。一方面，这样做推广了页面；另一方面，由于在电脑上读取网站比在功能手机上简单得多，这样做实际上也提高了移动用户的使用效率。
附加服务：加入Mobilizer、Read It Later以及Instapaper这类附加服务链接，可以让移动用户将内容保存起来，并在方便的时候再进行阅读。0.2.3 设计移动网站时需要考虑的问题
网页设计师不要为移动网站设计所迷茫——尽管移动设备的种类与日俱增，包括手机、平板电脑、网络电视设备，甚至一些图像播放设备。在为这些不同设备创建移动网站时，首先需要确保设计的网站能够适用于所有浏览器及操作系统，也就是说，可以在尽量多的浏览器及操作系统中运行。除此之外，在为移动设备创建网站时，还需要考虑如下问题。
移动设备的屏幕尺寸和分辨率。
移动用户需要的内容。
使用的HTML、CSS及JavaScript是否有效且简洁。
网站是否需要为移动用户使用独立域名。
网站需要通过怎样的测试。0.2.4 主流移动设备屏幕的分辨率
在当前的市面中，智能手机的屏幕尺寸主要包括如下几种标准。
128×160像素
176×220像素
240×320像素
320×480像素
400×800像素
480×800像素
960×800像素
1 080×1 920像素
就手机的尺寸而言，Android给出了一个具体的统计，详情请参阅网站http://developer.android. com/ resources/dashboard/screens.html，如图0-2所示。图0-2 Android设备屏幕尺寸的市场占有率
由此可见，在目前市面中，分辨率为800×480和854×480的手机用户居多。
另外，作为另一种主流移动设备，平板电脑不仅拥有更大的屏幕尺寸，而且在浏览方式上也有所不同。例如，大部分平板电脑（以及一些智能手机）都能够以横向或纵向模式进行浏览。这样即使在同一款设备中，屏幕的宽度有时为1 024像素，有时则为800像素或更少。但是一般来说，平板电脑为用户提供了更大的屏幕空间。可以认为，大部分平板电脑设备的屏幕尺寸为最主流的（1 024～1 280）× （600～800）像素。事实证明，在平板电脑中可以很轻松地以标准格式浏览大部分网站。这是因为其浏览器使用起来就像在计算机显示器上使用一样简单，并且通过Android系统中的缩放功能可以放大难以阅读的微小区域。0.2.5 使用标准的HTML、CSS和JavaScript技术
在开发移动网站时，只有使用正确的标准格式的HTML、CSS和JavaScript技术，才能让页面在大部分移动设备中适用。另外，设计师可以通过HTML的有效验证来确认它是否正确。具体验证方法是登录网站http://validator.w3.org/，使用W3C验证器检查HTML、XHTML以及其他标记语言。除此之外，它还可以验证CSS、RSS，甚至是页面上的无效链接。
在为移动设备编写网页时，需要注意如下5个“慎用”。（1）慎用表格HTML表格
移动设备的屏幕尺寸很小，使用水平滚动相对困难，从而导致表格难以阅读。请尽量避免在移动布局中使用表格。（2）慎用HTML表格布局
在Web页面布局中，建议不使用HTML表格。而且在移动设备中，这些表格会让页面加载速度变慢，并且影响美观，尤其是在它与浏览器窗口不匹配时。另外，在页面布局中通常使用的是嵌套表格，这类表格会让页面加载速度更慢，并且让渲染过程变得更困难。（3）慎用弹出窗口
通常来讲，弹出窗口很讨厌，而在移动设备上，它们甚至能让网站变得不可用。有些移动浏览器并不支持弹出窗口，还有一些浏览器则总是以意料之外的方式打开它们（通常会关闭原窗口，然后打开新窗口）。（4）慎用图片布局
与在页面布局中使用表格类似，加入隐藏图像以增加空间及影响布局的方法经常会让一些老的移动设备死机或无法正确显示页面。另外，它们还会增加下载时间。（5）慎用框架及图像地图（image maps）
目前，许多移动设备都无法支持框架及图像地图特性。其实，从适用性上来看，HTML5的规范中已经摈弃了框架（iframe除外）。
因为移动用户通常需要为浏览网站耗费流量而付费，所以在设计移动页面时，应尽可能地确保使用少的HTML标签、CSS属性和服务器请求。0.3 移动Web开发必备技术
本节教学录像：4分钟
除了前面介绍的HTML、XHTML、CSS、JavaScript、DOM和ECMAScript技术之外，开发移动Web还需要掌握如下技术。（1）HTML5
HTML5是当今HTML语言的最新版本，将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期望能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。（2）jQuery Mobile
jQuery Mobile是jQuery在手机和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。jQuery Mobile开发团队说：“能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。”（3）PhoneGap
PhoneGap是一个基于HTML、CSS和JavaScript创建跨平台移动应用程序的快速开发平台。PhoneGap使开发者能够利用iPhone、Android、Palm、Symbian、WP7、WP8、Bada和Blackberry智能手机的核心功能，包括地理定位、加速器、联系人、声音和振动等。此外，PhoneGap拥有丰富的插件供开发者调用。（4）Node.js
Node.js是一个基于Chrome JavaScript运行时建立的一个平台，用来方便地搭建快速、易于扩展的网络应用。Node.js借助事件驱动，非阻塞I/O模型变得轻量和高效，非常适合运行在分布式设备的数据密集型的实时应用。（5）jQTouch
jQTouch是一个jQuery的插件，主要为手机Webkit浏览器实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript库。它支持iPhone、Android等手机，是提供一系列功能为手机浏览器WebKit服务的jQuery插件。（6）Sencha Touch
Sencha Touch和jQTouch密切相关，是基于JavaScript编写的Ajax框架ExtJS，将现有的ExtJS整合jQTouch、Raphaël库，推出适用于最前沿Touch Web的Sencha Touch框架。该框架是世界上第一个基于HTML5的Mobile App框架。同时，ExtJS更名为Sencha，jQTouch的创始人David Kaneda以及Raphaël的创始人也已加盟Sencha团队。
当然，除了上述主流移动Web开发技术之外，还有其他盈利性商业组织推出的第三方框架。这些框架都方便了开发者的开发工作。读者可以参阅相关资料，了解并学习这些框架的知识。0.4 移动Web开发学习路线图
本节教学录像：2分钟
移动Web开发是一个漫长的过程，需要读者总体规划合理的学习路线，这样才能够达到事半功倍的效果。学习移动Web开发的基本路线图如图0-3所示。（1）第一阶段——打好基础
这一阶段主要做好基础方面的工作。HTML、CSS和JavaScript是网页设计最基础的技术。无论是学习传统桌面Web开发还是移动Web开发，都必须具备这3项技术。而Dreamweaver是最流行的网页设计和开发工具，使用它可以达到事半功倍的效果。
这4种技术是相互贯通的，并且可以同时学习并使用。这一阶段比较耗时，要达到基本掌握需要耗时3个月左右。（2）第二阶段——学习最前沿技术
HTML5是当今HTML技术的最新版本。和以前的版本相比，HTML5的功能更加强大，并且支持移动Web应用。因为HTML5和第一阶段中的HTML技术有很多共同之处，所以这一阶段的学习比较容易，用一个月左右的时间即可掌握。（3）第三阶段——学习开源框架
本阶段的主要任务是学习第三方开源框架，如jQuery Mobile、PhoneGap、jQTouch和Sencha Touch等框架。因为第一阶段和第二阶段已经打好了基础，所以本阶段的学习比较轻松。图0-3中的3个框架用一个月左右的时间即可掌握。图0-3 移动Web学习路线图0.5 jQuery Mobile学习路线图
本节教学录像：2分钟
jQuery Mobile技术属于移动Web学习路线图中的第三个阶段。jQuery Mobile的学习路线图如图0-4所示。（1）第1步：掌握基础知识
这是在学习jQuery Mobile开发技术之前的最基础性知识，包括jQuery Mobile介绍、下载并获取jQuery Mobile、搭建jQuery Mobile开发环境和开发基础必备等内容。（2）第2步：掌握核心技术
这是jQuery Mobile技术的最核心语法知识，也是最基本的知识，包括页面结构，导航链接处理， Ajax修饰，页面加载和缓存处理，对话框处理，页面导航，页脚栏、工具栏和标签栏，按钮触发处理，表单数据传输和列表展示等内容。（3）第3步：掌握知识进阶
这是提高jQuery Mobile技术的知识，使读者的水平提升到一个新的高度，包括内容格式化处理、主题化设计、jQuery Mobile API和常用插件等内容。（4）第4步：掌握典型应用
这部分需要实战掌握开发jQuery Mobile典型应用的方法，包括打造移动Web应用程序， PhoneGap框架，搭建移动Web综合开发环境，jQuery Mobile实战和视频、二维码、文件压缩等内容。（5）第5步：综合实战演练
这部分对前面所学的内容进行综合演练，通过综合实例的实现过程，对前面所有的知识达到融会贯通的效果。图0-4 jQuery Mobile学习路线图
本书后面的内容就是按照上述学习路线图进行安排的。第1篇基础知识第1章 jQuery Mobile基础第2章 jQuery Mobile开发必备知识第1章jQuery Mobile基础
本章教学录像：21 分钟
jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且拥有一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。本章详细讲解jQuery Mobile的基础知识，为读者步入本书后面知识的学习打下基础。
本章要点（已掌握的在方框中打钩）
jQuery Mobile简介
jQuery Mobile 的特性
获取jQuery Mobile
搭建轻量级测试环境
使用jQuery Mobie 设计网页
综合应用—使用 jQuery Mobile 设计第一个网页1.1 jQuery Mobile简介
本节教学录像：6分钟1.1.1 jQuery介绍
jQuery是一款优秀的兼容多浏览器的JavaScript框架，是一个轻量级的JS库。其核心理念是“write less,do more”（写得更少，做得更多）。jQuery在2006年1月由美国人John Resig在纽约的Barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，它由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的JavaScript库。在世界前10 000个访问最多的网站中，有超过55%在使用jQuery。
注意
Barcamp是一种国际研讨会网络。此类研讨会是开放、由参与者相互分享的工作坊式会议，议程内容由参加者提供，焦点通常放在发展初期的网际应用程式、相关开放源代码技术、社交协定思维以及开放资料格式上。
在网页制作领域中，jQuery的主要功能和优势如下。
jQuery不但兼容CSS 3，而且兼容各种浏览器（IE 6.0+、FF 1.5+、 Safari 2.0+、 Opera 9.0+）。jQuery 2.0及后续版本将不再支持IE 6/7/8浏览器。
jQuery使用户能够更加方便地处理HTML documents、events，实现动画效果，并且方便地为网站提供Ajax交互。
jQuery为使用者提供了健全的文档说明，各种应用也讲解得十分详细。
jQuery为开发人员提供了许多成熟的插件，通过这些插件可以设计出动感的页面。
jQuery能够使用户的HTML页面保持代码和html内容分离。也就是说，不用再在HTML里面插入一堆JS来调用命令了，只需定义ID即可。
jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供的API可以让开发者编写插件，其模块化的使用方式使开发者可以很轻松地开发出功能强大的静态或动态网页。
具体来说，jQuery的特点如下。
动态特效。
支持Ajax。
通过插件来扩展。
方便的工具，如浏览器版本判断。
渐进增强。
链式调用。
多浏览器支持，支持Internet Explorer 6.0+、Opera 9.0+、Firefox 2+、Safari 2.0+、Chrome 1.0+（在2.0.0中取消了对Internet Explorer 6/7/8的支持）。1.1.2 jQuery的分支——jQuery Mobile
随着智能手机系统的普及，现在主流移动平台上的浏览器功能已经赶上了桌面浏览器，因此jQuery团队引入了jQuery Mobile（JQM）。JQM的使命是向所有主流移动浏览器提供一种统一体验，使整个Internet上的内容更加丰富，而不管使用的是哪一种查看设备。
JQM的目标是在一个统一的UI中交付超级JavaScript功能，跨越最流行的智能手机和平板电脑设备进行工作。与jQuery一样，JQM是一个在Internet上直接托管、免费可用的开源代码基础。事实证明，当JQM致力于统一和优化这个代码基时，jQuery核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了非常大的发展。
与jQuery核心库一样，用户的开发计算机上不需要安装任何东西，只需将各种*.js和*.css文件直接包含到自己的Web页面中即可。这样，JQM的功能就好像被放到了用户的指尖，供随时使用。
在网页制作领域中，jQuery Mobile的基本特点如下。（1）一般简单性
JQM框架简单易用，主要使用标记实现页面开发，无需或仅需很少JavaScript。（2）持续增强和优雅降级
尽管jQuery Mobile利用最新的 HTML5、CSS3和JavaScript，但并非所有移动设备都提供这样的支持。jQuery Mobile的哲学是同时支持高端和低端设备，比如那些没有JavaScript支持的设备，尽量提供最好的体验。（3）Accessibility
jQuery Mobile在设计时考虑了访问能力。它拥有Accessible Rich Internet Applications（WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。（4）小规模
jQuery Mobile框架的整体大小比较小，JavaScript库12 KB，CSS 6 KB，还包括一些图标。（5）主题设置
JQM框架中提供了一个主题系统，允许用户提供自己的应用程序样式。1.2 jQuery Mobile的特性
本节教学录像：4分钟
本章前面已经讲解了jQuery Mobile的基本特点。其实，在jQuery Mobile的众多特点中，有非常重要的4个突出特性：跨平台的UI、简化标记的驱动开发、渐进式增强、响应式设计。本节简要讲解这4个特性的基本知识。1.2.1 跨所有移动平台的统一UI
通过采用HTML5和CSS3标准，jQuery Mobile提供了一个统一的用户界面（User Interface， UI）。移动用户希望他们的用户体验能够在所有平台上保持一致。然而，通过比较iPhone和Android上的本地Twitter App，可发现用户体验并不统一。jQuery Mobile应用程序解决了这种不一致性，提供给用户一个与平台无关的用户体验，而这正是用户熟悉和期待的。此外，统一的用户界面还会提供一致的文档、屏幕截图和培训，而不管终端用户使用的是什么平台。
jQuery Mobile也有助于消除为特定设备自定义UI的需求。一个jQuery Mobile代码库可以在所有支持的平台上呈现出一致性，而且无须进行自定义操作。与为每个OS提供一个本地代码库的组织结构相比，这是一种费用非常低廉的解决方案。而且就支持和维护成本而言，从长远来看，支持一个单一的代码库也颇具成本效益。1.2.2 简化的标记驱动的开发
jQuery Mobile页面是使用HTML5标记设计（styled）的。除了在HTML5中新引入的自定义数据属性之外，其他一切东西对Web设计人员和开发人员来说都很熟悉。如果你已经很熟悉HTML5，则转移到jQuery Mobile也应算是一个相对无缝的转换。就JavaScript和CSS而言，jQuery Mobile在默认情况下承担了所有负担。但是在有些情况下，仍然需要依赖JavaScript来创建更为动态的或增强的页面体验。除了设计页面时用到的标记具有简洁性之外，jQuery Mobile还可以迅速地原型化用户界面。可以迅速创建功能页面、转换和插件（widget）的静态工作流，从而通过最少的付出让用户看到活生生的原型。1.2.3 渐进式增强
jQuery Mobile可以为一个设备呈现出可能是最优雅的用户体验。jQuery Mobile可以呈现出应用了完整CSS 3样式的控件。尽管从视觉上来讲，C级的体验并不是最吸引人的，但是它可以演示平稳降级的有效性。随着用户升级到较新的设备，C级浏览器市场最终会减小。但是在C级浏览器退出市场之前，当运行jQuery Mobile App时，仍然可以得到实用的用户体验。
A级浏览器支持媒体查询，而且可以从jQuery Mobile CSS3样式（styling）中呈现出可能是最佳的体验。2C级浏览器不支持媒体查询，也无法从jQuery Mobile中接收样式增强。
本地应用程序并不能总是平稳地降级。在大多数情况下，如果设备不支持本地App特性（feature），甚至不能下载App。例如，iOS 5中的一个新特性是iCloud存储，这个新特性使多个设备间的数据同步更为简化。出于兼容性考虑，如果创建了一个包含这个新特性的iOS App，则需要将App的“minimum allowed SDK”（允许的最低SDK）设置为5.0。当App出现在App Store中时，只有运行iOS 5.0或者更高版本的用户才能看到。在这一方面，jQuery Mobile应用程序更具灵活性。1.2.4 响应式设计
jQuery Mobile UI可以根据不同的显示尺寸来呈现。例如，同一个UI会恰如其分地显示在手机或更大的设备上，比如平板电脑、台式机或电视。（1）一次构建，随处运行
有没有可能构建一个可用于所有消费者（手机、台式机和平板电脑）的应用程序呢？完全有可能。Web提供了一个通用的分发方式。jQuery Mobile提供了跨浏览器的支持。例如，在较小的设备上，用户可以使用带有简要内容的小图片，而在较大的设备上则可以使用带有详细内容的较大图片。如今，具有移动呈现功能（mobile presence）的大多数系统通常都支持桌面式Web和移动站点。在任何时候，只要用户必须支持一个应用程序的多个分发版本，就会造成浪费。系统根据自己的需要“支持”移动呈现，以避免浪费的速率，会促成“一次构建、随处运行”的神话得以实现。
在某些情况下，jQuery Mobile可以为用户创建响应式设计。下面讲解jQueryMobile的响应式设计如何良好地应用于竖屏（portrait）模式和横屏（landscape）模式中的表单字段。例如，在竖屏视图中，标签位于表单字段的上面。而当将设备横屏放置时，表单字段和标签并排显示。这种响应式设计可以基于设备可用的屏幕真实状态提供最好用的体验。jQuery Mobile为用户提供了很多这样优秀的UX（用户体验）操作方法，而且不需要用户付出半分力气。（2）可主题化的设计
jQuery Mobile提供了另一个可主题化的设计，允许设计人员快速地重新设计他们的UI。在默认情况下，jQuery Mobile提供了5个可主题化的设计，而且可以灵活地互换所有组件的主题，其中包括页面、标题、内容和页脚组件。创建自定义主题的最有用的工具是ThemeRoller。
可以轻易地重新设计一个UI。例如，可以迅速采用jQuery Mobile应用程序的一个默认主题，然后在几秒钟内就可以使用另外一个内置的主题来重新设计默认主题。在修改主题从列表中选择另外一个主题，唯一需要添加的一个标记是data-theme属性。
- （3）可访问性
jQuery Mobile App在默认情况下可以让残障人士使用，一般会利用屏幕阅读器这项辅助技术。1.3 获取jQuery Mobile
本节教学录像：2分钟
要想正常运行一个jQuery Mobile移动应用页面，需要先获取与jQuery Mobile相关的插件文件。具体的获取方法有两种，分别是下载相关插件文件和使用URL方式加载相应文件。本节详细讲解获取jQuery Mobile的基本知识。1.3.1 下载插件
要想正确运行jQuery Mobile移动应用页面，需要至少包含如下两个文件。
jQuery.Mobile-1.4.5.min.js：jQuery Mobile框架插件，目前的最新版本为1.4.5。
jQuery.Mobile-1.4.5.min.css：与jQuery Mobile框架相配套的CSS样式文件，目前的最新版本为1.4.5。
下载jQuery.Mobile插件的基本流程如下。（1）登录jQuery Mobile官方网站（http://jquerymobile.com），如图1-1所示。图1-1 jQuery Mobile的官方网站界面（2）单击右侧导航条中的“Custom download”链接进入文件下载页面，如图1-2所示。（3）单击“Select branch”中的下拉框，可以选择一个版本，此时最新版本是1.4.5。单击下方的“Zip File”链接可以下载，如图1-3所示。（4）下载成功后会获得一个名为“jquery.mobile-1.4.5.zip”的压缩包，解压后会获得CSS、JS和图片格式的文件，如图1-4所示。图1-2 文件下载页面图1-3 下载1.4.5版本图1-4 解压后的效果1.3.2 使用URL方式加载插件文件
除了可以在官方下载页下载对应的jQuery Mobile文件外，还可以使用URL方式从jQuery CDN下载插件文件。CDN的全称是Content Delivery Network，用于快速下载跨Internet常用的文件。只要在页面的
元素中加入下列代码，同样可以执行jQuery Mobile 移动应用页面。注意
通过URL加载jQuery Mobile插件的方式，可以使版本的更新更加及时。但由于是通过jQuery CDN服务器请求的方式进行加载，在执行页面时必须时时保证网络的畅通，否则不能实现jQuery Mobile移动页面的效果。1.4 搭建轻量级测试环境
本节教学录像：2分钟
jQuery Mobile的开发过程是网页开发的过程，和传统网页开发相比，唯一的差别是这些网页需要在移动设备中运行。在开发过程应用中，可以搭建一个轻量级的测试环境。这个测试环境能够跨平台，可以在Linux、Windows和苹果系统中使用。搭建jQuery Mobile跨平台、轻量级测试环境的基本流程如下。（1）登录Opera官方网站，如图1-5所示。（2）下载Opera Mobile Emulator，下载完成后会获得一个可运行文件。笔者获得的是Opera_Mobile_Emulator_12.1_Windows.exe，如图1-6所示。（3）双击上述可运行文件进行安装，安装成功后双击“Opera Mobile Emulator”图标运行，初始运行界面如图1-7所示。此处选择语言“简体中文”。（4）单击“确定”按钮，在新界面中可以进行相关设置。在此只需使用默认设置即可，如图1-8所示。（5）单击“启动”按钮后成功运行测试工具Opera Mobile Emulator，如图1-9所示。图1-5 Opera官方网站图1-6 获得的可运行文件图1-7 选择语言图1-8 设置界面图1-9 Opera Mobile Emulator运行效果
提示
使用jQuery Mobile的最大好处是支持跨平台和跨设备开发，开发的应用程序马上可以在Android和iOS上工作，同样也可以在其他平台上工作。作为一个独立开发者，为不同的平台维护基础代码是一项巨大的工作。为单个手机平台编写高质量的手机应用需要全职工作，为每个平台重复做类似的事情需要大量的资源。应用程序能够在Android和iOS设备上同时工作，对我来说是一个巨大收获。1.5 使用jQuery Mobile设计网页
本节教学录像：1分钟
jQuery Mobile的语法是为HTML元素的选取编制的，可以对元素执行某些操作。使用jQuery Mobile的基本语法格式如下。
$(selector).action()
美元符号：定义 jQuery。
选择符（selector）：“查询”和“查找” HTML 元素。
* jQuery 的 action() ：执行对元素的操作。
例如下面的代码：
$(this).hide() //隐藏当前元素
$("p").hide()//隐藏所有段落
$("p.test").hide()//隐藏所有 class="test" 的段落
$("#test").hide()//隐藏所有 id="test" 的元素
接下来通过一段简单的代码让读者认识jQuery Mobile的强大功能。
This is a heading
This is a paragraph.
This is another paragraph.
上述代码演示了jQuery中hide()函数的基本用法。函数hide()的功能是隐藏当前的HTML元素。执行效果如图1-10所示，只显示一个按钮。单击这个按钮后，会隐藏所有的HTML元素，包括这个按钮，此时页面一片空白。图1-10 未被隐藏时1.6 综合应用——使用jQuery Mobile设计第一个网页
本节教学录像：6分钟
本节以一个具体例子开始，讲解在Android中使用jQuery设计网页的过程。【范例1-1】使用jQuery Mobile设计网页 （光盘:\配套源码\1\first\）
本实例的目的是给页面添加一些JavaScript元素，让页面支持一些基本的动态行为。在具体实现的时候，当然是基于jQuery Mobile框架。具体要做的是，让用户控制是否显示页面顶部那个太引人注目的导航栏，这样用户可以只在想看的时候去看。实现流程如下。（1）隐藏
#header u1.hide{
display：none;
}（2）定义显示和隐藏菜单的按钮，代码如下。
这里指定一个带有leftButton类的div元素，将被放在header里面。下面是这个按钮的完整CSS样式代码。
#header div.leftButton {
position: absolute;
top: 7px;
left: 6px;
height: 30px;
font-weight: bold;
text-align: center;
color: white;
text-shadow: rgba (0,0,0,0.6) 0px -1px 1px;
line-height: 28px;
border-width: 0 8px 0 8px;
-webkit-border-image: url(images/button.png) 0 8 0 8;
}
试读结束[说明：试读内容隐藏了图片]