jQuery Mobile 简介
jQuery Mobile（简称 jQM）是一个基于 jQuery 的移动端网页 UI 框架，用于快速构建跨平台、触控优化、响应式的移动网站或混合应用（Hybrid App）。
基本信息
核心特点
| 特性 | 说明 |
|---|
| 触控优化 | 支持 tap、swipe、taphold 等手势事件 |
| 自动增强 | 普通 HTML 标签自动变为美观控件（如 <input> → 样式化输入框） |
| 响应式布局 | 自动适配手机、平板 |
| 页面过渡动画 | 支持 slide、flip、pop 等转场效果 |
| 主题系统 | 内置 A/B 主题 + ThemeRoller 自定义 |
| 轻量级 | 压缩后 ~200KB（CSS + JS） |
设计理念
“Write Less, Do More” —— 与 jQuery 一致
- 使用 HTML5
data-* 属性 配置组件
- 无需写 JavaScript 即可实现丰富交互
- 基于 渐进增强（Progressive Enhancement）
<!-- 示例：一个按钮 -->
<a href="#page2" data-role="button" data-transition="slide">下一页</a>
典型应用场景（历史）
| 场景 | 示例 |
|---|
| 企业内网移动门户 | 考勤、报销、审批 |
| 轻量级移动网站 | 活动报名、产品展示 |
| PhoneGap/Cordova 混合应用 | 快速打包为 APK/IPA |
优缺点对比
| 优点 | 缺点 |
|---|
| 学习曲线低（熟悉 HTML 即可） | 已停止维护（无安全更新） |
| 组件丰富，开箱即用 | 性能较差（大量 DOM 操作） |
| 跨平台兼容性好（支持旧设备） | 不支持现代 PWA 特性 |
| 中文文档丰富 | 样式老旧，难与现代设计融合 |
核心组件一览
| 组件 | data-role 值 |
|---|
| 页面 | page |
| 头部 | header |
| 内容区 | main |
| 页脚 | footer |
| 按钮 | button |
| 列表 | listview |
| 表单控件 | 自动增强（slider, flipswitch） |
| 网格布局 | grid-a ~ grid-d |
快速示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<div data-role="header"><h1>欢迎</h1></div>
<div data-role="main" class="ui-content">
<p>这是 jQuery Mobile 页面</p>
<a href="#" class="ui-btn ui-btn-inline ui-corner-all">点击我</a>
</div>
<div data-role="footer"><h4>© 2025</h4></div>
</div>
</body>
</html>
当前建议（2025 年）
| 情况 | 推荐 |
|---|
| 学习/了解历史 | 值得一学，理解“自动增强”思想 |
| 维护旧项目 | 继续使用 1.4.5 + CDN |
| 开发新项目 | 不推荐 |
| 现代替代品 | |
| → Bootstrap 5 | 响应式 + 组件丰富 |
| → Framework7 | 原生 App 风格 |
| → Ionic 7 | 混合开发首选 |
| → Tailwind CSS | 轻量定制化 |
学习资源（中文）
| 资源 | 链接 |
|---|
| 官方 API（归档） | https://api.jquerymobile.com/ |
| w3school 中文教程 | https://www.w3school.com.cn/jquerymobile/ |
| 菜鸟教程 | https://www.runoob.com/jquerymobile/ |
| ThemeRoller（归档） | http://themeroller.jquerymobile.com/ |
总结一句话
jQuery Mobile 是 2010 年代移动网页开发的“瑞士军刀”，如今更适合学习与维护，而非新项目首选。
需要 PPT 简介slides、对比表格 或 迁移到 Bootstrap 的方案？随时告诉我！
