**jQuery Mobile 快速上手教程**
jQuery Mobile 是一个基于 jQuery 的前端框架，专为移动设备设计，旨在提供一致的跨平台用户体验。本教程将帮助你快速掌握如何使用 jQuery Mobile 创建一个基本的移动网页。
### 一、jQuery Mobile 的核心理念
jQuery Mobile 的主要目标是简化移动 Web 开发，通过简单的 HTML 标签和 CSS 类实现触摸友好的界面。它通过自动页面增强（page enhancement）机制，将普通的 HTML 页面转化为具有响应式布局和交互效果的移动页面。
### 二、jQuery Mobile 的基本结构
1. **数据属性（Data Attributes）**：jQuery Mobile 使用"data-" 前缀的自定义属性来添加行为和样式。例如，`<a data-role="button">` 会将链接转变为按钮样式。
2. **页面容器（Page Container）**：所有 jQuery Mobile 页面都必须包含在一个 `data-role="page"` 的 div 中，这是页面的基本单元。
3. **导航结构（Navigation Structure）**：使用 `data-rel` 属性创建链接间的导航关系，如 `data-rel="back"` 返回前一页，`data-rel="dialog"` 创建对话框样式页面。
4. **主题（Theming）**：jQuery Mobile 提供了一套主题系统，通过 `data-theme` 属性可以设置元素的主题色。
### 三、创建第一个 jQuery Mobile 页面
以下是一个简单的示例，展示如何创建一个基本的 jQuery Mobile 页面：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个 jQuery Mobile 页面</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="myFirstPage">
<div data-role="header">
<h1>欢迎来到我的页面</h1>
</div>
<div data-role="content">
<p>这是我的第一个 jQuery Mobile 页面！</p>
<a href="#" data-role="button">点击我</a>
</div>
<div data-role="footer">
<h4>底部栏</h4>
</div>
</div>
</body>
</html>
```
在这个例子中，我们创建了一个包含头部、内容和底部的页面。头部和底部都是可选的，但内容区域是必需的。
### 四、页面加载与增强
当你访问一个 jQuery Mobile 页面时，框架会自动检测页面结构并进行增强，包括添加样式和事件处理程序。为了在页面间平滑切换，jQuery Mobile 使用 AJAX 来加载新页面，并通过 `data-url` 属性保持页面历史记录。
### 五、交互组件
jQuery Mobile 提供了许多内置的交互组件，如按钮、表单、下拉菜单、滑块等，它们都可以通过添加特定的数据属性轻松创建。
1. **按钮（Buttons）**：`<a>` 或 `<input type="button">` 添加 `data-role="button"` 变为按钮。
2. **表单（Forms）**：自动增强表单元素，如文本输入、选择器和滑块。
3. **网格（Grids）**：使用 `data-role="grid"` 创建响应式的网格布局。
4. **工具栏（Toolbars）**：包含头部、尾部和面板，可以设置各种样式和功能。
### 六、自定义主题和样式
jQuery Mobile 的主题系统允许你自定义颜色和样式，通过改变 CSS 文件中的 swatch 颜色或使用在线 ThemeRoller 工具。你还可以通过添加自定义 CSS 来覆盖默认样式，以满足个性化需求。
### 七、性能优化
虽然 jQuery Mobile 使开发变得简单，但要注意其可能带来的性能问题，尤其是对于复杂的页面和大量 DOM 操作。合理组织页面结构、延迟加载（懒加载）非初始页面、避免过多的自动增强等策略可以帮助提升性能。
jQuery Mobile 提供了一个强大且易用的框架，用于快速构建移动 Web 应用。通过理解和实践，你可以轻松创建出富有吸引力和互动性的移动页面。这个实训任务书01，就是引导你逐步走进 jQuery Mobile 的世界，开始你的第一个移动页面之旅。
JqueryMobile快速上手教程－实训任务书01-我的第一个JqueryMobile页面.zip （1个子文件） 
实训任务书01-我的第一个JqueryMobile页面 
实训任务书01-我的第一个JqueryMobile页面.docx 1.75MB
