jQuery Mobile 是一个极好的框架，用于编写移动 Web 应用程序。jQuery Mobile 构建于流行的jQuery 和用户界面 (UI) 之上，是一个有效的统一框架，可为您编写移动 Web 应用程序。有了 jQueryMobile，就可以确保外观、感觉和行为在不同移动平台上的一致性。jQuery Mobile 基本特性包括：
一般简单性和灵活性
该框架易于使用。您可以：
主要使用标记驱开发动页面，无需或仅需很少 JavaScript。
使用高级 JavaScript 和事件。
使用一个 HTML 文件和多个嵌入页面。
将应用程序分解成多个页面。
逐步强化和全面兼容
尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和JavaScript，但并非所有移动设备都提供这样的支持。jQuery Mobile 的理念是同时支持高端和低端设备，比如那些不支持JavaScript 的设备，尽量提供最好的体验。
支持触摸屏输入和其他输入方法。
jQuery Mobile 为不同输入方法和事件提供支持：触摸屏、鼠标和基于光标焦点的用户输入。
可访问性
jQuery Mobile 在设计时考虑了访问能力，它支持 Accessible Rich Internet Applications(WAI-ARIA)，以帮助使用辅助技术的残障人士访问 Web 页面。
轻量级和模块化
该框架属于轻量级，拥有一个大小（版本 1.0.1 进行了缩小和压缩）为 24KB 的 JavaScript 库，7KB 的 CSS以及一些图标。
主题
该框架还提供一个主题系统，允许您定义自己的应用程序样式。有了这个新的 ThemeRoller应用程序，您就可以轻松地创建您自己的主题。
jQuery Mobile 框架包括构建完整移动 Web 应用程序和网站所需的所有 UI组件。页面、对话框、工具栏、不同类型的列表视图，各种表单元素和按钮等。jQuery Mobile 构建于 jQuery内核之上，因此您可以访问关键设备，包括 HTML 和 XML 文档对象模型 (DOM) 的遍历操作；事件处理；使用 Ajax服务器通信；以及 Web 页面的动画和图像效果。
有了 jQuery Mobile，您就可以轻而易举地编写基础 Web 应用程序。由于 jQuery Mobile是一个非常全面的基础架构，提供了一些高级事件和 API，所以您还可以编写高级移动 Web 应用程序和网站。
本文将介绍 jQuery Mobile 最新版本（版本 1.0.1）的基本原理。了解浏览器支持、UI 组件和API。要跟随本文学习，您需要：
之前接触过 HTML
理解 JavaScript 基本原理
了解 jQuery 基本知识
您可以 下载 本文所用的 jQuery Mobile 源代码示例。参考资料 提供了部分有关 jQueryMobile、jQuery、JavaScript、DOM 和 HTML5 的信息。
回页首
浏览器支持移动设备浏览器经历了漫长的发展，但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是jQuery Mobile 持续增强和支持全面兼容发挥作用的地方。
jQuery Mobile 同时支持高端和低端设备，包括那些不支持 JavaScript的设备。持续增强是一个设计理念，包含以下核心原则（来源：Wikipedia）：
所有浏览器都应该能够访问全部基础内容。
所有浏览器都应该能够访问全部基础功能。
增强的布局由外部链接的 CSS 提供。
增强的行为由外部链接的 CSS 提供。
终端用户浏览器偏好应受到重视。
所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和CSS 持续增强。
jQuery Mobile 为大量移动设备提供支持。jQuery Mobile 将设备支持根据其支持级别分类或分组成 3个类别：
A 级：设备支持一个充分增强的用户体验和基于 Ajax 的动画页面过渡。jQueryMobile 支持超过 20 个不同设备，其中包括：iOS 3.2-5.0、Android 2.1-2.3 与3.0、BlackBerry 6-7 与 Playbook、Skyfire 4.1、Opera Mobile；还支持桌面浏览器Chrome、Firefox、Internet Explorer 和 Opera。
B 级：设备支持一个增强体验，但是没有 Ajax导航特性。支持的设备包括：BlackBerry 5.0、Opera Mini 5.0-6.5 和 Nokia Symbian^3。
C 级：设备支持一个基本的、非增强的 HTML 体验。支持的设备包括：上一代智能手机，包括BlackBerry 4.x、Windows Mobile 和其他设备。
参阅 参考资料 获取一个完整的 jQuery Mobile 支持平台列表。
本文其余部分将描述 jQuery Mobile 页面构造、HTML5 数据属性和 UI 组件。
回页首
一个 jQuery Mobile 页面构造如 清单 1 所示，一个典型的 jQuery Mobile 页面有 3 部分：页眉、内容和页脚部分。
清单 1. 典型的 jQuery Mobile 页面
CONTENT AREA
图 1 显示了 清单 1 结构。
图 1. 一个 HTML5 jQuery Mobile 页面结构页眉部分通常放置页面标题和 logo 等信息。内容部分放置特定 Web 应用程序和各种小部件。页脚部分很适合导航。
要利用 jQuery Mobile 高级功能和 HTML 语法，jQuery Mobile HTML 文档必须定义 HTML5文档类型。HTML 文档其余部分包括：
和 部分，其中 包含 jQuery Mobile引用和 CSS 移动主题
部分包含 jQuery Mobile 内容
清单 2 显示 HTML5 jQuery Mobile 文档的一个示例。
清单 2. jQuery Mobile HTML5 页面结构
CONTENT AREA
jQuery Mobile 提供一组丰富的列表视图。更多详细信息，请参见 jQuery Mobile 列表视图页面（参阅参考资料）。
表单表单是一种常见的 Web 构件，用于将信息发布到服务器。jQuery Mobile 支持许多表单 UI组件：文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。所有这些都很容易创建。上一小节介绍了其中的大多数元素。
jQuery Mobile 提供一组丰富的列表视图。清单 24 显示一个带菜单按钮和提交按钮的表单。
清单 24. 简单表单和提交按钮选择按钮是由本机
图 22 显示 清单 24 中的结构.
图 22. 带有选择菜单和提交按钮的简单表单jQuery Mobile 表单元素页面提供更多信息（参阅
