图书
电子书
课程
VIP会员
书课包

jQuery Mobile从入门到精通

978-7-115-41574-5
作者: 巅峰卓越
译者:
编辑: 张翼
分类: 移动开发

图书目录:

详情

本书面向jQuery Mobile的零基础读者，介绍基础入门知识和实际操作技巧。全书紧贴软件开发的实际需求，首先向读者展示语言的背景知识和应用范围，之后通过实例和自测，系统讲解相关知识点，同时兼顾实际开发项目经验。为了增强实用性，光盘中还特别赠送了精选的考试认证、求职面试等题库，供读者研究学习。最后，为帮助初入职场的从业者顺利进入角色，还在光盘中赠送了职业规划建议及相关开发文档。

图书摘要

版权信息

书名：jQuery Mobile从入门到精通

ISBN：978-7-115-41574-5

本书由人民邮电出版社发行数字版。版权所有，侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

•　编　　著　巅峰卓越

　 责任编辑　张　翼

•　人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

　 邮编　100164 　电子邮件　315@ptpress.com.cn

　 网址　http://www.ptpress.com.cn

•　读者服务热线：(010)81055410

　 反盗版热线：(010)81055315


本书以零基础讲解为宗旨，用实例引导读者学习，深入浅出地介绍jQuery Mobile开发的相关知识和实战技能。

本书第1篇基础知识主要讲解jQuery Mobile基础常识和开发必备知识等；第2篇核心技术主要讲解jQuery Mobile语法、预加载、页面缓存、页面脚本、对话框、导航、页脚栏、工具栏、标签栏、按钮、表单、列表等；第3篇知识进阶主要讲解内容格式化、主题化设计、jQuery Mobile API、常用插件等，还介绍移动Web应用程序的开发方法及开发环境建设方法；第4篇综合实战通过电话本管理系统和平板阅读器系统两个实战案例，介绍完整的jQuery Mobile开发流程。

本书所附DVD光盘中包含与图书内容全程同步的教学录像。此外，还赠送大量相关学习资料，以便读者扩展学习。

本书适合任何想学习jQuery Mobile开发的读者。无论读者是否从事计算机相关行业，是否接触过jQuery Mobile，均可通过学习本书快速掌握jQuery Mobile开发的方法和技巧。


国家“863”软件专业孵化器建设是“十五”初期由国家科技部推动、地方政府实施的一项重要的产业环境建设工作，围绕“推广应用863技术成果，孵化人、项目和企业”主题，在国家高技术发展研究计划（“863”计划）和地方政府支持下建立了服务软件产业发展的公共技术支撑平台体系。国家863软件孵化器各基地以“孵小扶强”为目标，在全国不同区域开展了形式多样的软件孵化工作，取得了较大的影响力和服务成效，特别是在软件人才培养方面，各基地做了许多有益探索。其中，设在郑州的国家“863”中部软件孵化器连续举办了四届青年软件设计大赛，引起了当地社会各界的广泛关注，并通过开展校企合作，以软件工程技术推广、软件国际化为背景，培养了一大批实用软件人才。

目前，我国大专院校每年都招收数以万计的计算机或者软件专业学生，这其中除了一部分毕业生继续深造攻读研究生学位之外，大多数都要直接走上工作岗位。许多学生在毕业后求职时，都面临着缺乏实际软件开发技能和经验的问题。解决这一问题，需要大专院校与企业界的密切合作。学校教学在注重基础的同时，应适当加强产业界当前主流技术的传授。产业界也可将人才培养、人才发现工作前置到学校教学活动中。国家“863”软件专业孵化器与大学、企业都有广泛合作，在开展校企合作、培养软件人才方面具有得天独厚的条件。当然，做好这些工作还有许多问题需要研究和探索，如校企合作方式、培养模式、课程设计与教材体系等。

欣闻由国家“863”中部软件孵化器组织编写的“从入门到精通”丛书即将面市，内容除涵盖目前主流技术知识和开发工具之外，更融汇了其多年从事大学生软件职业技术教育的经验，可喜可贺。作为计算机软件研究和教学工作者，我衷心希望这套丛书的出版能够为广大青年学子提供切实有效的帮助，能够为我国软件人才培养做出新的贡献。

　

北京大学信息科学技术学院院长 梅宏

2010年3月12日


本书是专门为初学者量身打造的一本编程学习用书，由知名计算机图书策划机构“巅峰卓越”精心策划而成。

本书主要面向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课件等。

01．光盘运行后会首先播放带有背景音乐的光盘主界面，其中包括【配套源码】、【配套视频】、【配套PPT】、【赠送资源】和【退出光盘】5个功能按钮。

02．单击【配套源码】按钮，可以进入本书源码文件夹，里面包含了“配套源码”和“实战练习”两个子文件夹，如下左图所示。

03．单击【配套视频】按钮，可在打开的文件夹中看到本书的配套教学录像子文件夹，如下右图所示。

04．单击【配套PPT】按钮，可以查看本书的配套教学用PPT课件，如下左图所示。

05．单击【赠送资源】按钮，可以查看本书赠送的超值学习资源，如下右图所示。

06．单击【退出光盘】按钮，即可退出本光盘系统。

本书由巅峰卓越编著，参加资料整理的人员有周秀、付松柏、邓才兵、钟世礼、谭贞军、张加春、王教明、万春潮、郭慧玲、侯恩静、程娟、王文忠、陈强、何子夜、李天祥、周锐、朱桂英、张元亮、张韶青、秦丹枫等。

由于编者水平有限，纰漏和不尽如人意之处在所难免，诚请读者提出意见或建议，以便修订并使之更臻完善。若读者在学习过程中遇到困难或疑问，或有任何建议，可发送电子邮件至 zhangyi@ptpress.com.cn。

　

编者

2016年10月


本章教学录像：25分钟

移动Web程序是指能够在智能手机、平板电脑、电子书阅读器等可移动设备中完整运行的Web程序。和传统桌面式Web程序相比，移动Web要求程序更加简单且高效，而且具备传统桌面Web程序所没有的硬件优势，如GPS定位、传感器应用等。本章将简要介绍开发移动Web应用程序的基础知识，为读者步入本书后面知识的学习打下基础。

本章要点（已掌握的在方框中打钩）

□ Web标准开发技术

□ 移动Web开发概览

□ 移动Web开发必备技术

□ 移动Web开发和jQuery Mobile学习路线图

本节教学录像：5分钟

互联网自从推出以来，因其强大的功能和娱乐性而深受广大用户的青睐。随着硬件技术的发展和进步，各网络站点也纷纷采用不同的软件技术来实现不同的功能。这样，在互联网这个宽阔的舞台上，站点页面技术变得更加成熟并稳定，越来越以更加绚丽的效果展现在广大用户面前。为了保证Web程序能够在不同设备中的不同浏览器中运行，国际标准化组织制定了Web标准。顾名思义，Web标准是所有站点在建设时必须遵循的一系列硬性规范。因为从页面构成来看，网页主要由3部分组成，即结构（Structure）、表现（Presentation）和行为（Behavior），所以对应的Web标准以下3个方面构成。

当前使用的结构化标准语言是HTML和XHTML，下面对这两种语言进行简要介绍。

HTML是Hyper Text Markup Language（超文本标记语言）的缩写，是构成Web页面的主要元素，是用来表示网上信息的符号标记语言。通过HTML，可以将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML翻译成可以识别的信息，这就是所见到的网页。HTML语言是网页制作的基础，是网页设计初学者必掌握的内容。

XHTML是eXtensible Hyper Text Markup Language（可扩展超文本标记语言）的缩写，是根据XML标准建立起来的标识语言，是由HTML向XML的过渡性语言。

目前的表现性语言是本书所讲的CSS。CSS是Cascading Style Sheets（层叠样式表）的缩写。当前最新的CSS规范是W3C于2001年5月23日推出的CSS3。通过CSS技术可以对网页进行布局，控制网页的表现形式。CSS可以与XHTML语言相结合，实现页面表现和结构的完整分离，提高站点的使用性和维护效率。

当前的行为标准是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标准并不是某一技术的规范，而是构成页面三大要素的规范的集合体。只有充分对上述标准分别了解并融会贯通，才能掌握其中的真谛。

本节教学录像：12分钟

说起移动Web，就不得不说传统桌面Web。传统桌面Web是指在台式机和笔记本电脑中运行的Web程序。随着互联网技术的兴起和发展，人们所说的Web通常就是指桌面Web。而随着近年来智能手机和平板电脑等可移动设备的发展和兴起，人们纷纷在可移动设备中浏览网页，这就推动了移动Web技术的发展。本节详细讲解主流移动平台和移动Web的基本特点。

在市面中有很多智能手机系统，形成了百家争鸣的局面。但是纵观智能手机的发展史，最受大家欢迎的当属微软、塞班、黑莓、苹果和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实时电子邮件服务。

黑莓系统稳定性非常优秀，其独特定位也深得商务人士青睐。可是它也因此在大众市场上得不到优势，国内用户和应用资源也较少。

其实，移动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的内容应当包括如下特点。

可以加入移动页面的功能包括以下方面。

网页设计师不要为移动网站设计所迷茫——尽管移动设备的种类与日俱增，包括手机、平板电脑、网络电视设备，甚至一些图像播放设备。在为这些不同设备创建移动网站时，首先需要确保设计的网站能够适用于所有浏览器及操作系统，也就是说，可以在尽量多的浏览器及操作系统中运行。除此之外，在为移动设备创建网站时，还需要考虑如下问题。

在当前的市面中，智能手机的屏幕尺寸主要包括如下几种标准。

就手机的尺寸而言，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系统中的缩放功能可以放大难以阅读的微小区域。

在开发移动网站时，只有使用正确的标准格式的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属性和服务器请求。

本节教学录像：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开发技术之外，还有其他盈利性商业组织推出的第三方框架。这些框架都方便了开发者的开发工作。读者可以参阅相关资料，了解并学习这些框架的知识。

本节教学录像：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学习路线图

本节教学录像：2分钟

jQuery Mobile技术属于移动Web学习路线图中的第三个阶段。jQuery Mobile的学习路线图如图0-4所示。

图0-4　jQuery Mobile学习路线图

（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步：综合实战演练

这部分对前面所学的内容进行综合演练，通过综合实例的实现过程，对前面所有的知识达到融会贯通的效果。

本书后面的内容就是按照上述学习路线图进行安排的。


第1章　jQuery Mobile基础

第2章　jQuery Mobile开发必备知识


本章教学录像：21分钟

jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且拥有一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。本章详细讲解jQuery Mobile的基础知识，为读者步入本书后面知识的学习打下基础。

本章要点（已掌握的在方框中打钩）

□ jQuery Mobile简介

□ jQuery Mobile的特性

□ 获取jQuery Mobile

□ 搭建轻量级测试环境

□ 使用jQuery Mobie设计网页

□ 综合应用——使用jQuery Mobile设计第一个网页

本节教学录像：6分钟

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是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供的API可以让开发者编写插件，其模块化的使用方式使开发者可以很轻松地开发出功能强大的静态或动态网页。

具体来说，jQuery的特点如下。

随着智能手机系统的普及，现在主流移动平台上的浏览器功能已经赶上了桌面浏览器，因此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框架中提供了一个主题系统，允许用户提供自己的应用程序样式。

本节教学录像：4分钟

本章前面已经讲解了jQuery Mobile的基本特点。其实，在jQuery Mobile的众多特点中，有非常重要的4个突出特性：跨平台的UI、简化标记的驱动开发、渐进式增强、响应式设计。本节简要讲解这4个特性的基本知识。

通过采用HTML5和CSS3标准，jQuery Mobile提供了一个统一的用户界面（User Interface，UI）。移动用户希望他们的用户体验能够在所有平台上保持一致。然而，通过比较iPhone和Android上的本地Twitter App，可发现用户体验并不统一。jQuery Mobile应用程序解决了这种不一致性，提供给用户一个与平台无关的用户体验，而这正是用户熟悉和期待的。此外，统一的用户界面还会提供一致的文档、屏幕截图和培训，而不管终端用户使用的是什么平台。

jQuery Mobile也有助于消除为特定设备自定义UI的需求。一个jQuery Mobile代码库可以在所有支持的平台上呈现出一致性，而且无须进行自定义操作。与为每个OS提供一个本地代码库的组织结构相比，这是一种费用非常低廉的解决方案。而且就支持和维护成本而言，从长远来看，支持一个单一的代码库也颇具成本效益。

jQuery Mobile页面是使用HTML5标记设计（styled）的。除了在HTML5中新引入的自定义数据属性之外，其他一切东西对Web设计人员和开发人员来说都很熟悉。如果你已经很熟悉HTML5，则转移到jQuery Mobile也应算是一个相对无缝的转换。就JavaScript和CSS而言，jQuery Mobile在默认情况下承担了所有负担。但是在有些情况下，仍然需要依赖JavaScript来创建更为动态的或增强的页面体验。除了设计页面时用到的标记具有简洁性之外，jQuery Mobile还可以迅速地原型化用户界面。可以迅速创建功能页面、转换和插件（widget）的静态工作流，从而通过最少的付出让用户看到活生生的原型。

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应用程序更具灵活性。

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属性。

<ul data-role="listview"data-inset="true" data-theme="a">

（3）可访问性

jQuery Mobile App在默认情况下可以让残障人士使用，一般会利用屏幕阅读器这项辅助技术。

本节教学录像：2分钟

要想正常运行一个jQuery Mobile移动应用页面，需要先获取与jQuery Mobile相关的插件文件。具体的获取方法有两种，分别是下载相关插件文件和使用URL方式加载相应文件。本节详细讲解获取jQuery Mobile的基本知识。

要想正确运行jQuery Mobile移动应用页面，需要至少包含如下两个文件。

下载jQuery.Mobile插件的基本流程如下。

（1）登录jQuery Mobile官方网站（http://jquerymobile.com），如图1-1所示。

图1-1　jQuery Mobile的官方网站界面

（2）单击右侧导航条中的“Custom download”链接进入文件下载页面，如图1-2所示。

图1-2　文件下载页面

（3）单击“Select branch”中的下拉框，可以选择一个版本，此时最新版本是1.4.5。单击下方的“Zip File”链接可以下载，如图1-3所示。

图1-3　下载1.4.5版本

（4）下载成功后会获得一个名为“jquery.mobile-1.4.5.zip”的压缩包，解压后会获得CSS、JS和图片格式的文件，如图1-4所示。

图1-4　解压后的效果

除了可以在官方下载页下载对应的jQuery Mobile文件外，还可以使用URL方式从jQuery CDN下载插件文件。CDN的全称是Content Delivery Network，用于快速下载跨Internet常用的文件。只要在页面的<head>元素中加入下列代码，同样可以执行jQuery Mobile 移动应用页面。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

注意

通过URL加载jQuery Mobile插件的方式，可以使版本的更新更加及时。但由于是通过jQuery CDN服务器请求的方式进行加载，在执行页面时必须时时保证网络的畅通，否则不能实现jQuery Mobile移动页面的效果。

本节教学录像：2分钟

jQuery Mobile的开发过程是网页开发的过程，和传统网页开发相比，唯一的差别是这些网页需要在移动设备中运行。在开发过程应用中，可以搭建一个轻量级的测试环境。这个测试环境能够跨平台，可以在Linux、Windows和苹果系统中使用。搭建jQuery Mobile跨平台、轻量级测试环境的基本流程如下。

（1）登录Opera官方网站，如图1-5所示。

图1-5　Opera官方网站

（2）下载Opera Mobile Emulator，下载完成后会获得一个可运行文件。笔者获得的是Opera_Mobile_Emulator_12.1_Windows.exe，如图1-6所示。

图1-6 　获得的可运行文件

（3）双击上述可运行文件进行安装，安装成功后双击“Opera Mobile Emulator”图标运行，初始运行界面如图1-7所示。此处选择语言“简体中文”。

图1-7　选择语言

（4）单击“确定”按钮，在新界面中可以进行相关设置。在此只需使用默认设置即可，如图1-8所示。

图1-8　设置界面

（5）单击“启动”按钮后成功运行测试工具Opera Mobile Emulator，如图1-9所示。

图1-9　Opera Mobile Emulator运行效果

提示

使用jQuery Mobile的最大好处是支持跨平台和跨设备开发，开发的应用程序马上可以在Android和iOS上工作，同样也可以在其他平台上工作。作为一个独立开发者，为不同的平台维护基础代码是一项巨大的工作。为单个手机平台编写高质量的手机应用需要全职工作，为每个平台重复做类似的事情需要大量的资源。应用程序能够在Android和iOS设备上同时工作，对我来说是一个巨大收获。

本节教学录像：1分钟

jQuery Mobile的语法是为HTML元素的选取编制的，可以对元素执行某些操作。使用jQuery Mobile的基本语法格式如下。

$(selector).action()

例如下面的代码：

$(this).hide() //隐藏当前元素
$("p").hide()//隐藏所有段落
$("p.test").hide()//隐藏所有 class="test" 的段落
$("#test").hide()//隐藏所有 id="test" 的元素

接下来通过一段简单的代码让读者认识jQuery Mobile的强大功能。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

上述代码演示了jQuery中hide()函数的基本用法。函数hide()的功能是隐藏当前的HTML元素。执行效果如图1-10所示，只显示一个按钮。单击这个按钮后，会隐藏所有的HTML元素，包括这个按钮，此时页面一片空白。

图1-10　未被隐藏时

本节教学录像：6分钟

本节以一个具体例子开始，讲解在Android中使用jQuery设计网页的过程。

【范例1-1】 使用jQuery Mobile设计网页　（光盘:\配套源码\1\first\）

本实例的目的是给页面添加一些JavaScript元素，让页面支持一些基本的动态行为。在具体实现的时候，当然是基于jQuery Mobile框架。具体要做的是，让用户控制是否显示页面顶部那个太引人注目的导航栏，这样用户可以只在想看的时候去看。实现流程如下。

（1）隐藏<header>中的ul元素，让它在用户第一次加载页面之后不会显示出来。具体代码如下。

   #header u1．hide{
   display：none;
   }

（2）定义显示和隐藏菜单的按钮，代码如下。

   <div class="leftButton"onclick="toggleMenu()">Menu<／div>

这里指定一个带有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;
}

上述代码的具体说明如下。

（3）开始在HTML文件中插入引入JavaScript的代码，将对aaa.js和bbb.js的引用写到HTML文件中。

   <script type="text/javascript" src="aaa.js"></script>
   <script type="text/javascript" src="bbb.js"></script>

在文件bbb.js中，编写一段JavaScript代码。这段代码的主要作用是让用户显示或者隐藏nav菜单。具体代码如下。

if (window.innerWidth && window.innerWidth <= 480) { 
   $(document).ready(function(){
      $('#header ul').addClass('hide'); 
      $('#header').append('<div class="leftButton" onclick="toggleMenu()">Menu</div>');
    }); 
   function toggleMenu() {
      $('#header ul').toggleClass('hide'); 
      $('#header .leftButton').toggleClass('pressed');
   }
}

【范例分析】

对文件bbb.js代码的具体说明如下。

第1行：括号中的代码，表示当Window对象的innerWidth属性存在并且innerWidth小于等于480px（这是大部分手机合理的最大宽度值）时才执行到内部。这一行保证只有当用户用手机或者类似大小的设备访问这个页面时，才会执行上述代码。

第2行：使用了函数document ready，此函数是“网页加载完成”函数。这段代码的功能是设置当网页加载完成之后才运行里面的代码。

第3行：使用了典型的iQuery代码，目的是选择header中的<ul>元素并且往其中添加hide类开始。

此处的hide前面CSS文件中的选择器，这行代码执行的效果是隐藏header的ul元素。

第4行：此处是给header添加按钮的地方，目的是可以显示和隐藏菜单。

第8行：函数toggleMenu()用jQuery的toggleClass()函数来添加或删除所选择对象中的某个类。这里应用了header的ul里的hide类。

第9行：在header的leftButton里添加或删除pressed类，类pressed的具体代码如下。

#header div.pressed {
   -webkit-border-image: url(images/button_clicked.png) 0 8 0 8;
}

【运行结果】

通过上述样式和JavaScript行为设置以后，Menu开始动起来了，默认是隐藏了链接内容，单击之后才会在下方显示链接信息，如图1-11所示。

图1-11　下方显示信息

注意

jQuery Mobile+HTML 5组合的弊端

jQuery Mobile+HTML 5作为手机应用开发平台是可行的。然而，这并不适用于（至少到目前为止）所有类型的应用程序。对于简单的内容显示和数据输入类型的应用程序（相对的是需要丰富多媒体/游戏程序），只是对原生程序一个有力的增强。

迅速检验移动站点的兼容性

在当前的技术环境下，移动Web和HTML5本身没有通用的技术标准，各个浏览器的支持也不尽相同。在jQuery Mobile的官方文档中提到，如果想验证自己站点的兼容性问题，可以登录jQuery Mobile Gallary（地址为http://www.jqmgallery.com/）进行检测，这也是现在唯一的官方检测机构。

1．为了测试移动Web程序，请尝试申请一个免费空间和域名。

2．在网络中搜索一个好用的Emulator。


本章教学录像：36分钟

jQuery Mobile 开发是一项浩瀚的工程，不仅需要具备HTML5、CSS和JavaScript方面的知识，而且需要Android和iOS等智能设备系统开发的基本知识。本章详细讲解jQuery Mobile开发所必须具备的基础知识，为读者步入本书后面知识的学习打下基础。

本章要点（已掌握的在方框中打钩）

□ HTML简介

□ XML技术

□ CSS技术基础

□ JavaScript技术基础

□ 综合应用——一个典型的页面文件

本节教学录像：15分钟

HTML是一种网页标记语言，它的所有部分都由标记组成。当前几乎所有的网页都是通过HTML展现在人们眼前的。当前最新的HTML版本是刚刚推出的HTML5。本节展示它的各种标记。

1．基本结构

HTML是一种网页标记语言，它的所有部分都是标记<>和</>括起来的，来看下面的代码。

<html>
<head>
<title>这是网页的标题标签</title>
</head>
<body>
这是网页内容
</body></html>

上面展示的代码，其实就是一个很简单的网页。网页就是通过这种方式展现给浏览者的各个参数介绍如下。

2．HTML标记特性

HTML必须以<html>开始，以</html>结束，文件头包含在<head>和</head>里面，文件体包含在<body>……</body>里面。在文件头部，用户可以用<title>……</ title >标记来声明文件标题。在HTML文档中，值得提醒读者的是，HTML也有注释。它和Java是完全不同的。HTML采用<!--注释-->这个标记注释。在HTML中，每一个标记都是成对出现。下面展示一段代码。

<html>
<head>
<title>欢迎进入Java网络世界</title>
</head>
<body>
这里是Java网络世界！
</body>
</html>

将文件保存为HTML文件，双击打开，会得到如图2-1所示的效果。

图2-1　第一个HTML页面

字体是网页中经常出现的内容，不同的网页字体也不同。在HTML中是如何实现这一目标的呢？接下来一一进行讲解。

1．设置标题

在HTML中，用户可以通过<hn>……</hn>来设置标题的大小，n的值可以取1~6中的任意一个整数。下面通过一个HTML代码讲解一个问题。

<html>
<head>
<title>标题标记</title>
</head>
<body>
<h1>相信标题标记的力量</h1>
<h2>相信标题标记的力量</h2>
<h3>相信标题标记的力量</h3>
<h4>相信标题标记的力量</h4>
<h5>相信标题标记的力量</h5>
</body>
</html>

将上述代码保存为.html格式，双击打开后会得到如图2-2所示的结果。

图2-2　标题标记

2．字体加粗、倾斜和加底线

在创建网页的时候，将字体加粗、倾斜和加底线工作是避免不了的。它们是通过什么样的标记语言实现的呢？下面通过一段HTML语言进行讲解。

<html>
<head>
<title>加粗 倾斜 加底线</title>
</head>
<body>
相信标题标记的力量<br></br>
<b>相信标题标记的力量</b><br></br>
<I>相信标题标记的力量</I><br></br>
<u>相信标题标记的力量</u><br></br>
</body>
</html>

上述代码中出现了几个新的标记，介绍如下。

执行代码后得到如图2-3所示的结果。

图2-3　将文字加粗、倾斜和加底线

3．将字体加上删除线、大字体和上标标记

在创建网页的时候，将字体加上删除线、大字体和上标标记是避免不了的。它们是通过什么样的标记语言实现的呢？下面通过一段HTML语言进行讲解。

<html>
<head>
<title>神奇的HTML</title>
</head>
<body>
神奇的HTML
<br></br>
<DEL>神奇的HTML</DEL><br></br>
<TT>神奇的HTML</TT><br></br>
神奇的HTML
<SUP>神奇的HTML</SUP>
</body>
</html>

上述代码中出现了新的标记，介绍如下。

执行代码后得到如图2-4所示的结果。

图2-4　为文字加上删除线、大字体和上标样式

4．设定字体大小、颜色、字形标记

这三种字体的属性是字体的常用格式，几乎所有网页都会设置这三种属性。它们和前面有所不同，下面通过一段HTML代码（2-1.html）进行讲解。

<html>
  <head>
    <title>设置文字的格式</title>
 </head>
 <body>
   <font color="#CC200" size="5" face="隶书">还好吗？现在过得无忧无虑还是仍然那样多愁善感？我好几次都在梦中梦到过你，你有的时候是哭着的，有的时候却又笑得毫无遮掩，弄得我不知所措，搞不清是该安慰还是该保持沉默，可等我醒了以后，却发现你好像在梦里什么都没有说过，只是哭或者笑，于是我猜，你肯定是有说不出的悲伤和快乐。</font>
    <br>
    <font color="#ee00FF" size="4" face="宋体">弄得我不知所措，搞不清是该安慰还是该保持沉默，可等我醒了以后，却发现你好像在梦里什么都没有说过，只是哭或者笑，于是我猜，你肯定是有说不出的悲伤和快乐。</font> 
  </body>
</html>

如果要设置字体大小、颜色和字形，可以在这个首标签里设置。各个参数的介绍如下。

执行上述代码后得到如图2-5所示的结果。

图2-5　设置字体

注意

一定要闭合HTML标签

在以往的页面源代码里，经常看到这样的语句：

也许过去我们可以容忍这样的非闭合HTML标签，但在今天的标准来看，这是非常不可取的，是必须百分之百避免的。一定要注意闭合你的HTML标签，否则将无法通过验证，并且容易出现一些难以预见的问题。

建议开发者使用如下形式。

在HTML语言中，为了使用显示的文字更加工整、条理顺序更加明朗，就要用到标示标记。下面通过一段HTML代码（2-2.html）进行讲解。

<html>
  <head>
    <title> 标示标记</title>
  </head>
  <body>
    <li>中国人
    <li>英国人
    <li>德国人
<ol type=I>
  <li>打开冰箱门
  <li>把它装进去
  <li>关上冰箱门
  </ol>
<DL>
  <DT>性别：<DD>男、女
  <DT>职业 :<DD>工程师、教师、程序员
  </DL>
 </body>
</html>

上述代码中各个参数的介绍如下。

<li>Some text here.
<li>Some new text here.
<li>You get the idea.

执行上述代码后得到如图2-6所示的结果。

<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>

图2-6　标示标记

在设计网页时，区域和段落在HTML中是必不可少的。在前面，其实读者已经看到通过<br></br>换行，这里就不多讲。这里讲解几个重要的区域标记和段落标记。

1．<hr>水平线

在许多页面中，为了文字的美观性，经常需要插入水平线标记。下面通过一段代码（2-3.html）讲解几种绘制分割线的方法。

<html>
  <head>
    <title>水平线的插入</title>
  </head>
  <body>
    绘制水平线 
    <hr>
    绘制水平线
    <hr width="120%">
    绘制分割字符串的水平线 
    <hr width="30%" size="4">
  绘制分割字符串的水平线 
    <hr width="400" size="30" noshade>
   水平线的不同对齐方式
    <hr align="left" width="400" size="10">
    <hr align="center" width="400" size="10">
    <hr align="right" width="400" size="10">
    </body>
</html>

参数介绍：

双击打开网页后会看到如图2-7所示的效果。

图2-7　水平线的插入

2．<p>……</p>段落标记

在段落间可以使用标记<p>……</p>让网页之间形成一行空白。需要注意的是，用户可以不写</p>。下面通过代码（2-4.html）进行讲解。

<html>
  <head>
    <title>我的心跟着希望在动</title>
  </head>
  <body>
    <p>
  我的未来不是梦
    </p>
    <p>
   我的心跟着希望在动
     </p> 
</body>
</html>

执行上述代码后得到如图2-8所示的结果。

图2-8　段落标记

在HTML语言中，许多时候会为浏览者表现一些数据，而表格是表现数据的最好工具。接下来详细讲解表格标记的使用方法。

1．<table>容器标记

表格实际上是一个容器。理解它十分简单，用它来装各种属性。下面通过一段代码（2-5.html）进行讲解。

<html >
<head>
<title>表格</title>
</head>

<body>
<table width="200" border="1">
  <tr>
     <td width="63">姓名</td>
     <td width="71">语文</td>
     <td width="44">数学</td>
  </tr>
  <tr>
     <td>张三</td>
     <td>78</td>
     <td>65</td>
  </tr>
  <tr>
     <td height="23">李四</td>
     <td>45</td>
     <td>67</td>
  </tr>
</table>
</body>
</html>

上述代码中各个表格参数的说明如下。

执行上述代码后得到如图2-9所示的结果。

图2-9　表格

2．表格标题

可以通过<caption>……</caption>标记为表格设置标题，设置方法十分简单，下面通过一段HTML代码（2-6.html）进行讲解。

<html >
<head>
<title>表格</title>
</head>
<body>
<table width="400" border="1">
<caption align="center">重庆万州二小一年级二班期末成绩</caption>
  <tr>
     <td width="63">姓名</td>
     <td width="71">语文</td>
     <td width="44">数学</td>
  </tr>
  <tr>
     <td>张三</td>
     <td>78</td>
     <td>65</td>
  </tr>
  <tr>
     <td height="23">李四</td>
     <td>45</td>
     <td>67</td>
  </tr>
</table>
</body>
</html>

参数align表示水平线的对齐方式，设置left表示居左对齐，设置center表示居中对齐，设置right表示居右对齐。

执行上述代码后得到如图2-10所示的结果。

图2-10　表格标题

3．表格中的标题栏

在前面的学习成绩表里依然有标题栏，但是它和普通的没有什么区别。在表格里，有专门的标题栏标记<th>……</th>。下面通过一段HTML代码（2-7.html）进行讲解。

<html >
<head>
<title>表格</title>
</head>

<body>
<table width="400" border="1">
<caption align="center">重庆万州二小一年级二班期末成绩</caption>
  <tr>
  <tr><th colspan="3">语文和数学成绩</th></tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>78</td>
    <td>65</td>
  </tr>
  <tr>
    <td height="23">李四</td>
    <td>45</td>
    <td>67</td>
  </tr>
</table>
</body>
</html>

执行上述代码后得到如图2-11所示的结果。

图2-11　表格的标题标签

在HTML中，表单的重要性不言而喻。它是服务器和浏览者交换的窗口。接下来详细讲解表单控件和表单组件的基本使用方法。

1．容器form

在HTML中，<form >……</form>表示表单的容器。它建立后，才能建立各个组件。下面通过一段HTML代码（2-8.html）进行讲解。

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单容器</title>
</head>
<body>
form容器
<form id="form1" name="form1" method="post" action="">
</form>
</body>
</html>

参数介绍如下。

执行上述代码后得到如图2-12所示的结果。

图2-12　表单容器

2．单行文本框

单行文本框是一种常用的组件。这里创建一个单行文本框，其代码（2-9.html）如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
请输入你的名字：
  <input type="text" name="textname" id="textname" />
</form>
</body>
</html>

文本框的属性参数很多，除了上面的，还有size、value等。用户不必记住，在后面会讲解如何通过可视化操作。执行上述代码后得到如图2-13所示的结果。

图2-13　单行文本框

3．密码文本框

密码框也是比较常见的表单元素。下面通过一段代码（2-10.html）进行讲解。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>密码文本框</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
请输入你的名字：
  <input type="text" name="textname" id="textname" />
 请输入的密码：
    <input type="password" name="password" id="password" />
</form>
</body>
</html>

执行上述代码后得到如图2-14所示的效果。

图2-14　密码框

4．单选按钮

单选按钮只能选择一个。单选按钮是如何实现的呢？下面通过一段HTML代码（2-11.html）进行讲解。

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单选按钮</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <p>
  <input type="radio" name="radio" id="D1" value="D1" />橘子
    <br />
      <input type="radio" name="radio" id="D2" value="D2" /> 苹果
      <br />
      <input type="radio" name="radio" id="D3" value="D3" />
      栗子
  </form>
</body>
</html>

执行上述代码后得到如图2-15所示的结果。

图2-15　单选按钮

5．多行文本框和按钮

多行文本框和按钮在表单中的作用举足轻重。下面通过一个实例进行讲解，其代码（2-12.html）如下。

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多行文本框和按钮</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<textarea name="Ri" cols="56" rows="10"></textarea>
<br />
  <input type="submit" name="Tj" id="Tj" value="提交" />
<input type="reset" name="Tj2" id="Tj2" value="重置" />
</form>
</body>
</html>

这段代码创建了多行文本框及两个按钮。执行上述代码后得到如图2-16所示的结果。

图2-16　多行文本框和按钮

HTML技术经过漫长的发展，新版本不断更新，每一次更新都为网页设计工作带来了巨大的变化。在2007年，HTML5被W3C所接受，正式成为网页设计标准。本节简要介绍HTML5的突出新特性，为读者步入本书后面知识的学习打下坚实的基础。

1．发展历程介绍

HTML 最近的一次升级是1999年12月发布的 HTML 4.01。自那以后，发生了很多事。最初的浏览器战争已经结束，Netscape 灰飞烟灭，IE 5 作为赢家后来又发展到IE 6、IE 7、IE 8、IE 9、IE 10、IE 11。Mozilla Firefox 从Netscape 的死灰中诞生，并跃居第二位。苹果和 Google 各自推出浏览器。而小家碧玉的 Opera以推动 Web 标准为己命，也一直在持续发展，甚至在手机和游戏机上有了真正的Web体验。

在当前市场应用中，HTML5将成为HTML、XHTML以及HTML DOM的新标准。虽然HTML5仍处于完善之中，但是大部分现代浏览器已经具备了支持某些HTML5新特性的功能。

2．全新功能

接下来简要介绍HTML5标准中创新性的升级内容。

（1）最激动人心的部分

多媒体对象将不再全部绑定在object或embed Tag中，而是视频有视频的Tag，音频有音频的Tag。

本地数据库功能将内嵌一个本地的SQL数据库，以加速交互式搜索、缓存和索引功能。并且离线Web程序也提供了巨大的支持，不再需要插件即可实现丰富的动画。

在HTML5中，使用Canvas 绘图对象可以在浏览器上面绘制矢量图形。这意味着可以脱离Flash和Silverlight，直接在浏览器中显示图形或动画。

（2）为HTML5建立的一些规则

（3）新特性

HTML5中主要增加了如下新特性。

本节教学录像：5分钟

XML（eXtensible Markup Language，可扩展标记语言）与HTML一样，都是SGML（Standard Generalized Markup Language,标准通用标记语言）。XML是Internet环境中跨平台、依赖于内容的技术，是当前处理结构化文档信息的有力工具。XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立。虽然XML占用的空间比二进制数据占用的更多，但XML极其简单，易于掌握和使用。

XML与Access、Oracle和SQL Server等数据库不同。数据库能够提供更强有力的数据存储和分析能力，如数据索引、排序、查找、相关一致性等，而XML的功能仅仅是展示数据。事实上，XML与其他数据表现形式最大的不同是极其简单。这是一个看上去有点琐细的优点，但正是这一点使XML与众不同。

XML的简单性使其易于在任何应用程序中读写数据，这使XML很快成为数据交换的唯一公共语言。虽然不同的应用软件也支持其他数据交换格式，但不久之后，它们都将支持XML。那就意味着程序可以更容易地与Windows、Mac OS、Linux以及其他平台下产生的信息结合，然后可以很容易加载XML数据到程序中并分析它，并以XML格式输出结果。

为了使得SGML显得用户友好，XML重新定义了SGML的一些内部值和参数，去掉了大量的很少用到的功能。这些繁杂的功能使得SGML在设计网站时显得复杂化。XML保留了SGML的结构化功能，这样就使得网站设计者可以定义自己的文档类型。XML同时推出一种新型文档类型，使得开发者可以不必定义文档类型。

XML是W3C制定的，XML的标准化工作由W3C的XML工作组负责。该小组由来自各个地方和行业的专家组成，他们通过email交流对XML标准的意见，并提出自己的看法（www.w3.org/TR/WD-xml）。因为XML是个公共格式（它不专属于任何一家公司），人们不必担心XML技术会成为少数公司的盈利工具。XML不是一门依附于特定浏览器的语言，而是一门可以完全独立应用的新型语言。

上面虽然讲解了XML的特点，但是有些初学者仍然不明白XML是用来做什么的。其实XML什么也不做，它只是用来存储数据，对HTML语言进行扩展。它和HTML分工很明显，XML用来存储数据，而HTML是用来如何表现数据的。下面通过一段程序代码（2-1.xml）进行讲解。

<?xml version="1.0" encoding="utf-8"?>
<book>
<person>
<first>Kiran</first>
<last>Pai</last>
<age>22</age>
</person>
<person>
<first>Bill</first>
<last>Gates</last>
<age>46</age>
</person>
<person>
<first>Steve</first>
<last>Jobs</last>
<age>40</age>
</person>
</book>

上面的语法不但可以这么写，只要符合语法，还可以写成汉语，比如下面的代码（2-3.xml）。

<?xml version="1.0" encoding="utf-8"?>
     <项目> 
        <名>天上星</名> 
        <电子邮件>tianshangxing@hotmail.com</电子邮件> 
        <住宅>何国何市何区何街道何番号</住宅> 
        <电话>86-021-742745674</电话> 
        <一言>XML学习</一言> 
     </项目>

从上面两段代码可以看出，XML的标记完全自由定义，不受约束。它只是用来存储信息，除了第一行固定以外，其他的只需主要前后标签一致，末标签不能省掉。将XML语法格式总结如下。

要获取XML文档十分简单。下面通过一个简单的Java代码获取上一节讲解的2-1.xml中的信息。

import java.io.File;
import org.w3c.dom.Document;
import org.w3c.dom.*;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.DocumentBuilder;
import org.xml.sax.SAXException;
import org.xml.sax.SAXParseException; 
public class ReadAndPrintXMLFile{
public static void main (String argv []){
try {
    DocumentBuilderFactory docBuilderFactory 
= DocumentBuilderFactory.newInstance();
            DocumentBuilder docBuilder 
= docBuilderFactory.newDocumentBuilder();
            Document doc = docBuilder.parse (new File("2-2.xml"));
            doc.getDocumentElement ().normalize ();
            System.out.println ("Root element of the doc is "
+ doc.getDocumentElement().getNodeName());
            NodeList listOfPersons = doc.getElementsByTagName("person");
            int totalPersons = listOfPersons.getLength();
            System.out.println("Total no of people : " + totalPersons);
            for(int s=0; s<listOfPersons.getLength() ; s++){
                 Node firstPersonNode = listOfPersons.item(s);
                 if(firstPersonNode.getNodeType() == Node.ELEMENT_NODE){
                        Element firstPersonElement = (Element)firstPersonNode;
                       NodeList firstNameList =
firstPersonElement.getElementsByTagName("first");
                       Element firstNameElement 
= (Element)firstNameList.item(0);
                       NodeList textFNList = firstNameElement.getChildNodes();
                       System.out.println("First Name : " + 
                              ((Node)textFNList.item(0)).getNodeValue().trim());
                     NodeList lastNameList 
= firstPersonElement.getElementsByTagName("last");
                        Element lastNameElement = (Element)lastNameList.item(0);
                        NodeList textLNList = lastNameElement.getChildNodes();
                        System.out.println("Last Name : " + 
                              ((Node)textLNList.item(0)).getNodeValue().trim());
                        NodeList ageList
= firstPersonElement.getElementsByTagName("age");
                       Element ageElement = (Element)ageList.item(0);
                       NodeList textAgeList = ageElement.getChildNodes();
                       System.out.println("Age : " +
((Node)textAgeList.item(0)).getNodeValue().trim());
                   } } }
       catch (SAXParseException err) 
{
              System.out.println ("** Parsing error" + ", line " 
                                               + err.getLineNumber () + ", uri " + err.getSystemId ());
             System.out.println(" " + err.getMessage ()); }      
      catch (SAXException e) {
            Exception x = e.getException ();
            ((x == null) ? e : x).printStackTrace ();
      }
      catch (Throwable t) {
              t.printStackTrace (); 
 }
        }
}

在Java API中还可以找到更多操作XML文档的方法。执行上述代码后得到如图2-17所示的结果。

图2-17　获取XML文档

注意

读者需要注意的是，学完这一节会发现，XML文档其实比HTML文档更简单。XML主要用来存储信息，不负责显示在页面。获取XML文档的方法有很多，并不是只有Java语言，还有许多语言都可以调用，如C#、PHP和ASP等，也包括HTML语言。

本节教学录像：3分钟

CSS技术是Web网页技术的重要组成部分，页面通过CSS的修饰可以实现用户需要的显示效果。本节简要介绍CSS技术的基本知识，并通过具体的实例来介绍其具体的使用流程，为读者步入本书后面知识的学习打下坚实的基础。

因为在现实应用中经常用到的CSS元素是选择符、属性和值，所以在CSS的应用语法中，其主要应用格式也主要涉及上述3种元素。CSS的基本语法结构如下。

<style type="text/css">
<!--
.选择符{属性：值}
-->
</style>

其中，CSS选择符的种类有多种，并且命名机制也不相同。

【范例2-1】 演示CSS技术的用法（光盘:\配套源码\2\1.html）

文件1.html的具体实现代码如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">                               <!--设置的样式-->
<!--
.mm {
    font-family: "Times New Roman", Times, serif;     /*设置字体*/
    font-size: 18px;                                  /*设置字体大小*/
    font-weight: bold;                                /*加粗字体*/
    color: #990000;                                   /*设置颜色*/
}
-->
</style>
</head>
<body class="mm">                                    <!--文本调用样式-->
我的未来不是梦
</body>
</html>

【运行结果】

执行后的效果如图2-18所示。

图2-18 执行效果

CSS属性是CSS中最为重要的内容之一。CSS通过本身的属性实现对页面元素的修饰，从而提供给用户绚丽的效果。在CSS中常用的属性有如下几类。

1．字体属性

字体属性的功能是设置页面字体的显示样式。常用的字体属性如表2-1所示。

表2-1　字体属性列表

属性

描述

font-family

设置使用什么字体

font-style

设置字体的样式是否为斜体

font-variant

设置字体大小写

font-weight

设置字体的粗细

font-size

设置字体的大小

2．颜色和背景属性

颜色和背景属性的功能是设置页面元素的颜色和背景颜色。常用的颜色和背景属性如表2-2所示。

表2-2　颜色和背景属性列表

属性

描述

color

设置元素前景色

background-color

设置元素背景色

background-image

设置背景图案重复方式

background-repeat

设置滚动方式

background-attachmen

设置背景图案的初始位置

background-position

设置背景图案的绝对位置

3．文本属性

文本属性的功能是设置页面文本的显示效果。常用的文本属性如表2-3所示。

表2-3　文本属性列表

属性

描述

text-align

设置文字的对齐

text-indent

设置文本的首行缩进

line-height

设置文本的行高

a：link

设置链接未访问过的状态

a：visited

设置链接访问过的状态

a:hover

设置链接的鼠标激活的状态

4．块属性

块属性的功能是设置页面内块元素的显示效果。常用的块属性如表2-4所示。

表2-4　块属性列表

属性

描述

margin-top

设置顶边距

margin-right

设置右边距

padding-top

设置顶端填充距

padding-right

设置右侧填充距

5．边框属性

边框属性的功能是设置页面内边框元素的显示效果。常用的边框属性如表2-5所示。

表2-5　边框属性列表

属性

描述

border-top-width

设置顶端边框宽度

border-right-width

设置右端边框宽度

width

设置图文混排的宽度属性

height

设置图文混排的高度属性

6．项目符号和编号属性

项目符号和编号属性的功能是设置页面内项目符号和编号元素的显示效果。常用的项目符号和编号属性如表2-6所示。

表2-6　项目符号和编号属性列表

属性

描述

display

设置是否显示符号

white-spac

设置空白部分的处理方式

7．层属性

层属性的功能是设置页面内层元素的定位方式。常用的层属性如表2-7所示。

表2-7　层属性列表

属性

描述

Absolute

设置绝对定位

Relative

设置相对定位

Static

设置无特殊定位

技巧

在页面head标签中引入所有的样式表文件

从理论上讲，可以在任何位置引入CSS样式表。但HTML规范建议在网页的head标记中引入，这样可以加快页面的渲染速度。

本节教学录像：10分钟

Web开发包括三部分：内容、样式及行为。此前的章节中介绍了HTML（内容）和CSS（样式），而JavaScript则代表行为。在设计中同时拥有这三者，并保持它们的相对独立是很重要的。本节介绍JavaScript是什么，以及如何将它加入到Web页面中，同时介绍一些脚本。随后将介绍一种名为jQuery的JavaScript框架，它让开发设计者能够轻松地将脚本加入页面，同时介绍一些jQuery脚本。最后介绍一种移动设备框架jQuery Mobile，此框架让开发设计者能轻松地创建移动设备应用程序的HTML文档。

JavaScript是一种脚本技术，页面通过脚本程序可以实现用户数据的传输和动态交互。JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。其目的是与HTML超文本标记语言、Java脚本语言（Java小程序）相互结合，实现Web页面中链接多个对象，并与Web客户交互的效果，从而实现客户端应用程序的开发。

使用JavaScript的具体语法格式如下。

<Script Language ="JavaScript">
JavaScript脚本代码1
JavaScript脚本代码2
……
</Script>

例如，下面的实例演示了使用JavaScript技术的过程。

【范例2-2】 演示JavaScript技术的用法（光盘:\配套源码\2\ javascript.html）

文件javascript.html的具体代码如下。

<html>
<head>
<Script Language ="JavaScript">
// JavaScript 开始
alert("这是第一个JavaScript例子!");                        //提示语句
alert("欢迎你进入JavaScript世界!");                        //提示语句
alert("今后我们将共同学习JavaScript知识！");                //提示语句
</Script> 
</head>
</html>

在上述实例代码中，“<Script Language="JavaScript"></Script>”之间的部分是JavaScript脚本语句。

【运行结果】

执行后的显示效果如图2-19所示。

图2-19 显示效果图

运算符是能够完成某种操作的一系列符号。在JavaScript中，常用的运算符有如下几种：算术运算符、比较运算符、布尔逻辑运算符和字串运算。

JavaScript中运算符的使用方式有双目运算符和单目运算符两种。其中，双目运算符具体使用的语法格式如下。

操作数１运算符 操作数２

由上述格式可以看出，双目运算符由两个操作数和一个运算符组成。例如，50＋40和"this"+"that"等。而单目运算符只需一个操作数，并且其运算符可在前或在后。

1．算术运算符

JavaScript中的算术运算符有单目运算符和双目运算符两种。JavaScript中常用的双目运算符如表2-8所示。

表2-8　常用双目运算符列表

元素

描述

元素

描述

+

表示加

-

表示减

*

表示乘

/

表示除

|

表示按位或

&

表示按位与

<<

表示左移

>>

表示右移

>>>

表示零填充

%

表示取模

JavaScript中常用的单目运算符如表2-9所示。

表2-9　常用单目运算符列表

元素

描述

元素

描述

-

表示取反

~

表示取补

++

表示递加1

--

表示递减1

2．比较运算符

JavaScript中比较运算符的基本操作过程如下：首先对它的操作对象进行比较，然后返回一个true或false值来表示比较结果。

JavaScript中常用的比较运算符如表2-10所示。

表2-10　比较运算符列表

元素

描述

元素

描述

<

表示小于

>

表示大于

<=

表示小于等于

>=

表示大于等于

=

表示等于

!=

表示不等于

3．布尔逻辑运算符

JavaScript中常用的布尔逻辑运算符如表2-11所示。

表2-11　布尔逻辑运算符列表

元素

描述

元素

描述

!

表示取反

&=

表示取与之后赋值

&

表示逻辑与

|=

表示取或之后赋值

|

表示逻辑或

^=

表示取异或之后赋值

^

表示逻辑异或

? :

表示三目操作符

||

表示或

==

表示等于

|=

表示不等于

 

 

其中，三目操作符具体使用的语法格式如下。

操作数？结果１：结果２

如果操作数的结果为真，则表述式的结果为结果１，否则为结果２。

JavaScript程序是由若干语句组成的，循环语句是编写程序的指令。JavaScript提供了完整的基本编程语句。本节对常用的JavaScript循环语句知识进行简要介绍。

1．if条件语句

if条件语句的功能是根据系统用户的输入值，做出不同的反应提示。例如，可以编写一段特定程序实现对不同输入文本的反应。if条件语句具体使用的语法格式如下。

if（表述式）
语句段１；
......
else
语句段２；
......

上述格式的具体说明如下。

if -else语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。在其表达式中必须使用关系语句来实现判断，并且是作为一个布尔值来估算的。若if后的语句有多行，则必须使用花括号将其括起来。

另外，通过if条件语句可以实现条件的嵌套处理。if语句的嵌套语法格式如下。

if（布尔值）语句１；
else（布尔值）语句２；
else if（布尔值）语句３；
……
else 语句４；

在上述格式下，每一级的布尔表述式都会被计算。若为真，则执行其相应的语句；若为否，则执行else后的语句。

2．for循环语句

for循环语句的功能是实现条件循环，当条件成立时执行特定语句集，否则将跳出循环。for循环语句具体使用的语法格式如下。

for（初始化；条件；增量）
语句集；

其中，“条件”是用于判别循环停止时的条件。若条件满足，则执行循环体，否则将跳出。“增量”用来定义循环控制变量在每次循环时按什么方式变化。三个主要语句之间必须使用逗号分隔。

3．while循环语句

while循环语句与for语句一样，当条件为真时重复循环，否则将退出循环。while循环语句具体使用的语法格式如下。

while（条件）
语句集；

4．do…while循环语句

“do…while”的中文解释是“执行……当……继续执行”。在“执行（do）”后面跟随命令语句，在“当（while）”后面跟随一组判断表达式。如果判断表达式的结果为真，则执行后面的程序代码。

do…while循环语句具体使用的语法格式如下。

do {
<程序语句区>
}
while(<逻辑判断表达式>)

5．break控制

break控制的功能是终止某循环结构的执行，通常将break放在某循环语句的后面。其具体使用的语法格式如下。

循环语句
break
例如下面一段语句。
<script>
a=new array(5,4,3,2,1);                     //数组初始值
sum=0                                       //变量初始值
for(i=0,i<a.length;++i)                     //小于数组长度，则变量递增
{
if (i==3 ) break                            //变量为3，则停止
sum+=a[i]
}
</script>

在上述代码中，for语句在i等于0、1、2、3时执行。当i等于3时，if条件为真，执行break语句，使for语句立刻终止。所以，for语句终止时的sum值是12。

6．switch循环语句

“switch”的中文解释是“切换”，其功能是根据不同的变量值来执行对应的程序代码。如果判断表达式的结果为真，则执行后面的程序代码。

switch语句具体使用的语法格式如下。

switch（<变量>）{
case<特定数值1>:程序语句区；
break;
case<特定数值2>:程序语句区；
break;
…
case<特定数值n>:程序语句区；
break;
default:程序语句区；
}

其中，default语句是可以省略的。省略后，当所有的case都不符合条件时，便退出switch语句。

函数为程序设计人员提供了一个功能强大的处理功能。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数，从而使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块，并可作为事件驱动的结果而调用的程序，从而实现一个函数把它与事件驱动相关联。

本节简要介绍JavaScript函数的基本知识，并通过几个简单的实例来介绍其使用方法。

1．函数的构成

JavaScript函数由如下部分构成。

其中，参数和return不是构成函数的必要条件。

2．JavaScript常用函数

在JavaScript技术中，常用的函数有如下几类。

编码函数即函数escape（），功能是将字符串中的非文字和数字字符转换成ASCII值。

译码函数即函数unescape（），和编码函数完全相反，功能是将ASCII字符转换成一般数字。

求值函数即函数eval（），有两个功能，一是进行字符串的运算处理，二是用来指出操作对象。

数值判断函数即函数isNan（），功能是判断自变量参数是不是数值。

转整数函数即函数parseInt（），功能是将不同进制的数值转换成以十进制表示的整数值。parseInt（）具体使用的语法格式如下。

parseInt(字符串[,底数])

通过上述格式可以将其他进制数值转换成十进制。如果在执行过程中遇到非法字符，则立即停止执行，并返回已执行处理后的值。

转浮点函数即函数parseFloat（），功能是将指定字符串转换成浮点数值。如果在执行过程中遇到非法字符，则立即停止执行，并返回已执行处理后的值。

【范例2-3】 演示求值函数eval()的基本用法（光盘:\配套源码\2\10.html）

实例文件10.html的功能是通过函数eval()计算指定字符串的值，主要代码如下。

<html>
……
<style type="text/css">
<!--
body {
    background-color: #9966CC;              /*设置背景颜色*/
}
-->
</style>
</head>
<body> 
<Script>
mm=1+2;                                    //变量初始值
zz=eval("1+2");                            //函数赋值
 document.write("1+2=",zz);                //输出结果
</Script>
</body>
</html>

在上述代码中，通过函数eval()计算出了“1+2”的和。

【运行结果】

执行后的效果如图2-20所示。

图2-20　显示效果图

JavaScript有许多小窍门使编程更加容易。其中之一就是eval()函数，这个函数可以把一个字符串当作一个JavaScript表达式去执行它，例如下面的代码。

var the_unevaled_answer = "2 + 3"; 
var the_evaled_answer = eval("2 + 3"); 
alert("the un-evaled answer is " + the_unevaled_answer + " and the evaled answer is " + the_evaled_answer);

运行上述eva程序，会看到在JavaScript里，字符串"2+3"实际上被执行了。所以当把the_evaled_answer的值设成 eval("2+3")时, JavaScript会明白并把2和3的和返回给the_evaled_answer。

这个看起来似乎有点傻，其实可以做出很有趣的事。比如使用eval可以根据用户的输入直接创建函数。这可以根据时间或用户输入的不同而使程序本身发生变化。通过举一反三，可以获得惊人的效果。

技巧

在页面底部引入JavaScript文件

开发者要永远记住一个原则，就是让页面以最快的速度呈现在用户面前。当加载一个脚本时，页面会暂停加载，直到脚本完全载入，所以会浪费用户更多的时间。如果JS文件只是要实现某些功能（比如点击按钮事件），那就放心地在body底部引入它，这绝对是最佳的方法。

用户对浏览器内所进行的某种动作称为事件。在JavaScript中，通常鼠标或热键的动作被称为事件（Event），由鼠标或热键引发的一连串程序的动作被称为事件驱动（Event Driver），而对事件进行处理的程序或函数被称为事件处理程序（Event Handler）。本节对JavaScript事件的基本知识进行简要介绍。

1．JavaScript中的常用事件

JavaScript中有如下几种常用的事件。

事件Abort的功能是当对象未完全加载前对其终止，适用于imge对象。

事件Blur的功能是将用户的输入焦点从窗口或表单上移开，适用于Window及所有表单子组件。

事件Change的功能是将用户的组件值进行修改处理，适用于text、password和select。

事件Click的功能是在某对象上单击一下鼠标左键，适用于link及所有表单子组件。

事件DblClick的功能是在某对象上连续双击鼠标，适用于link及所有表单子组件。

事件DrogDrop的功能是用鼠标左键或对象拖拽至窗口内，适用于Window对象。

事件Error的功能是加载文件或图像时发生错误，适用于Window和imge对象。

事件Focus的功能是将输入焦点或光标放到指定对象内，适用于Window及所有表单子组件。

事件KeyDown的功能是响应用户按下键盘任意按键的一刹那，适用于image、link及所有表单子组件。

事件KeyPress的功能是响应用户按下键盘任意按键后，按键弹起的一刹那，适用于image、link及所有表单子组件。

事件Load的功能是响应浏览器读入该文件时，适用于document对象。

事件MouseDown的功能是响应用户单击鼠标时，适用于document、link及所有表单子组件。

事件MouseMove的功能是响应用户移动鼠标光标时，适用于document、link及所有表单子组件。

事件MouseOut的功能是响应用户将鼠标光标离开某对象时，适用于document、link及所有表单子组件。

事件MouseOver的功能是响应用户将鼠标光标移动到某对象上时，适用于document、link及所有表单子组件。

事件MouseUp的功能是响应用户将鼠标左键放开时，适用于document、link及所有表单子组件。

事件Move的功能是响应用户或程序移动窗口时，适用于Window对象。

事件Reset的功能是响应用户单击表单中的Reset按钮，适用于form对象。

事件Resize的功能是调整窗口的大小尺寸，适用于Window对象。

事件Select的功能是响应用户选取某对象时，适用于text、password和select。

事件Submit的功能是响应用户单击表单中Submit按钮时，适用于form。

事件Unload的功能是关闭或退出当前页面，适用于document。

2．事件处理程序

所谓事件处理程序，是指当一个事件发生后要做什么处理。在前面介绍的20多种事件中，每一种都有其专用的事件处理过程的定义方式。例如，事件Load的事件处理程序就是OnLoad；同样，事件Click的事件处理程序就是OnClick。

在现实应用中，通常将处理程序直接嵌入到HTML标记内。

【范例2-4】 演示事件处理程序的基本用法（光盘:\配套源码\2\11.html）

实例文件11.html的功能是在页面载入时输出提示语句，其主要实现代码如下。

<html>
……
<style type="text/css">
<!--
body {
    background-color: #9966CC;                                  /*设置背景颜色*/
}
-->
</style>
</head>
<body onLoad='alert("你确定要访问此页吗?里面可能含有非法信息!!")'>  //载入提示信息
</body>
</html>

【运行结果】

上述实例页面一旦载入，便显示提示信息，具体效果如图2-21所示。

图2-21　显示效果图

事件处理是对象化编程的一个很重要的环节。没有了事件处理，程序就会变得很死，缺乏灵活性。事件处理的过程可以这样表示：发生事件—启动事件处理程序—事件处理程序做出反应。其中，要使事件处理程序能够启动，必须先告诉对象，如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。事件的处理程序可以是任意JavaScript语句，但是一般用特定的自定义函数（function）来处理事情。

有如下3种方法可以指定事件处理程序。

（1）直接在HTML标记中指定。

（2）编写特定对象特定事件的JavaScript。这种方法用得比较少，但是在某些场合还是很好用的。

（3）在JavaScript中说明。

在现实应用中，下面是一些最常用的Web页面脚本。

1．创建rollover

rollover是一种很好的与用户互动的方法，能够提高页面互动性，且不会给看不见JavaScript的用户带来负面影响。最简单的创建rollover的方法是用CSS定制链接样式，而不是使用JavaScript。使用CSS定制链接样式时，只需要为原链接及rollover状态加入不同的样式。例如：

a:link { color: blue; }
a:hover { color: purple; }

创建的链接本身是蓝色，而当鼠标停留在链接上时，颜色则变为紫色。

在现实应用中，rollover不适合用在移动设备中。因为在智能手机及平板电脑上无法“将鼠标移动到链接”上，只能通过点击的方法实现。如果想实现鼠标移动到链接上时显示弹出框的效果，移动手机用户也无法看到。

2．表单数据验证

开发者总是需要确认用户是否正确填写了网站上的表单，这种确认行为被称为表单验证，通常会供使用JavaScript在表单数据传送至服务器前进行验证。此处需要注意的是，使用JavaScript进行的表单数据验证很容易被规避。人们可以通过关闭JavaScript来规避验证，在提交表单后再将它打开。如果提交正确数据是必须的，开发者应当在服务器上也进行验证。

读者可以在网上找到许多现成的用于各种类型表单数据验证的脚本，只要在搜索引擎上搜索“form validation”（表单验证）便可以找到。

3．打开新窗口

想必很多读者都应该见过利用JavaScript在新窗口打开的广告。尽管这种做法很烦人，但在Web应用程序上可以用它来显示其他信息或查询数据。

使用JavaScript打开新窗口最简单的做法是通过内建函数window.open();。例如，要在网页http://www.sohu.com/上打开一个名为“test”的窗口，可以写为

window,open('http://www.sohu.com/','test');

而下面的代码会关闭一个打开的窗口。

window.close()；

不能在窗口外部关闭该窗口。

4．Cookies的设置及读取

Cookies是本地计算机上储存的一小块数据。Web开发者利用它们在本地计算机上存储网站的离线数据。数据种类很多，从登录证书到游戏信息等无所不有。JavaScript可以让cookies的设置、读取及删除变得简单。

Cookies被保存为name=value pairs，具有有效期和路径（服务器端允许读取的路径）。例如下面是一个使用JavaScript书写的cookie。

document.cookie = 'name=value; expires=Day, dd Mon yyyy hh:mm:ss UTC; path=/ ';

当读取cookie时，将document.cookie作为字符串读取，并解析它的等号或分号。使用分号将cookie分割，会更容易理解name=value pairs。删除cookie时，只需要将cookie的value设置为1。

下面的代码演示了3个用来设置、读取及删除cookie的函数。第一个函数用于创建/设置cookie。

function createCookie(name,value,expireDays) {
  if (expireDays) {
      var date = new Date();
      date.setTime(date.getTime()+(expireDays*24*60*60*1000));
      var expires = "; expires="+date.toGMTString();
  }
  else var expires =" ";
  document.cookie = name+"="+value+expires+"; path=/";
}

第二个函数用来读取cookie。

function readCookie(cookieName) {
  var name = cookieName + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
  }
  return null;
}

第三个函数用来删除cookie。

function eraseCookie(cookieName) {
 createCookie(cookieName," ",-1);
}

本节教学录像：3分钟

经过前面章节的学习，读者应该了解了常用的网页设计技术。本节通过一个典型页面文件实例来说明这些技术在网页中的具体应用。

【范例2-5】 一个精美的导航栏（光盘\配套源码\2\zonghe\）

实例文件1.html的具体代码如下。

<html xmlns="http://www.w3.org/1999/xhtml">           <!--html代码-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <!--html代码-->
<title>无标题文档</title>
<link href="xiala.css" type="text/css" rel="stylesheet" />
<script language="JavaScript1.2" type="text/javascript" src="nn.js">    
<!--html代码-->
</script>
</head>
<body>
<div class="main">                                    <!--html代码-->
<div class="mm">
     <ul class="STYLE1" id="nn">
<li style="left:auto"><a href="#">导航栏目1</a>        <!--html代码-->
     <ul >
     <li><a href="#">下拉栏目1</a></li>
     <li><a href="#">下拉栏目2</a></li>
     <li><a href="#">下拉栏目3</a></li>
     </ul>
……
</div>
</div>
</body>
</html>

在文件1.html的代码中，以“<>”标记的字符都是HTML语言标记，并通过“<link href="xiala.css" type="text/css" rel="stylesheet" />”调用了文件xiala.css。

文件xiala.css是一个CSS样式文件，其主要代码如下。

<!--CSS样式代码-->
.main{
    width:450px;
     height:auto;
    height:auto;
    border:1px solid #666666;
    margin:100px auto;
    background:#ffffff;
     padding:20px;
    font-size:18px;
    font-family:"宋体";}
……
}

在文件1.html的代码中，通过“<script language="JavaScript1.2" type="text/javascript" src="nn.js"></script>”调用了文件nn.js。

文件nn.js是一个JavaScript的脚本文件，主要代码如下。

sfHover = function() {
    var sfEls = document.getElementById("nn").getElementsByTagName("LI");     <!--JavaScript 脚本代码-->
    for (var i=0; i<sfEls.length; i++) {             <!--JavaScript 脚本代码-->
     sfEls[i].onmouseover=function() {               <!--JavaScript 脚本代码-->
         this.className+=" sfhover";
     }
     sfEls[i].onmouseout=function() {                <!--JavaScript 脚本代码-->
        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
     }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);  <!--JavaScript 脚本代码-->

【运行结果】

上述实例文件1.html的执行效果如图2-22所示。

从图2-22所示的效果可以看出，联合使用HTML、CSS和JavaScript技术实现了指定的显示效果。

图2-22　实例执行效果图

1．CSS编码的书写规范

CSS的编码规范是指在书写CSS代码时所必须遵循的格式。按照标准格式书写的CSS代码不但会便于读者的阅读，而且有利于程序的维护和调试。按照Web标准的要求，标准的CSS书写规范应该包括如下两方面。

（1）书写顺序

在使用CSS时，最好将CSS文件单独书写并保存为独立文件，而不是把其书写在HTML页面中。这样做的好处是便于CSS样式的统一管理，便于代码的维护。

（2）书写方式

在CSS中，虽然在不违反语法格式的前提下使用任何的书写方式都能正确执行，但是还是建议读者在书写每一个属性时，使用换行和缩进。这样做的好处是使编写的程序一目了然，便于程序的后续维护。

2．在编写CSS代码时需要遵循的命名规范

命名规范是指CSS元素在命名时所要遵循的规则。在网页设计过程中需要定义大量的选择符来实现页面表现，如果没有好的命名规范，会导致页面的混乱或名称的重复，从而造成额外的麻烦。所以说，CSS在命名时应遵循一定的规范，使页面结构达到最优化。

在CSS开发中，通常使用的命名方式是结构化命名方法。它是相对于传统的表现效果命名方式来说的。例如，当文字颜色为红色时，使用red来命名；当某页面元素位于页面中间时，使用center来命名。这种传统的方式表面看来比较直观和方便，但是这种方法不能达到标准布局所要求的页面结构和效果相分离的要求。所以，结构化命名方式便结合了表现效果的命名方式，实现样式命名。

常用页面元素的命名方法如表2-12所示。

表2-12　常用页面元素的命名

页面元素

名称

页面元素

名称

主导航

mainnav

子导航

subnav

页脚

foot

内容

content

头部

header

底部

footer

商标

label

标题

title

顶部导航

topnav

侧栏

sidebar

左侧栏

leftsidebar

右侧栏

rightsidebar

标志

logo

标语

banner

子菜单

submenu

注释

note

容器

container

搜索

search

登录

login

管理

admin

1．使用单侧边界属性，尝试实现如图2-23所示的效果。

图2-23　执行效果

2．使用浮动元素

如果在某页面上多个浮动元素同时相邻，则这些相邻元素会按照页面结构的顺序排列在一行，直到宽度超过包含它们的容器宽度时才换行显示。要求使用浮动元素尝试实现如图2-24所示的效果。

图2-24　执行效果


相关图书

树莓派开发实战（第3版）
树莓派开发实战（第3版）
React Native移动开发实战 第3版
React Native移动开发实战 第3版
深入浅出React Native
深入浅出React Native
Flutter App开发：从入门到实战
Flutter App开发：从入门到实战
React Native移动开发实战 第2版
React Native移动开发实战 第2版
App自动化测试与框架实战
App自动化测试与框架实战

相关文章

相关课程

异步社区-致力于优质IT知识的出版和分享

京ICP备05035396号-6

京公网安备11010602100305号

增值电信业务经营许可证（京B2-20201559）Powered by 人民邮电出版社▪出版云