jQuery Mobile 安装使用教程
一、jQuery Mobile 简介
jQuery Mobile 是 jQuery 团队推出的移动设备优先的 Web 框架，旨在帮助开发者快速构建响应式、跨平台的 HTML5 移动应用界面。它适用于手机、平板甚至桌面浏览器。
二、安装 jQuery Mobile
2.1 通过 CDN 引入（推荐）
将以下代码加入 HTML 页面 <head> 中：
<!-- jQuery 库 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><!-- jQuery Mobile 样式 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><!-- jQuery Mobile 脚本 -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
2.2 离线安装
- 下载地址：https://jquerymobile.com/download/
- 解压后，将 CSS 和 JS 文件引用到你的项目中。
三、快速上手示例
<!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.12.4.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="home"><div data-role="header"><h1>首页</h1></div><div data-role="content"><p>欢迎使用 jQuery Mobile！</p><a href="#about" class="ui-btn">关于我们</a></div><div data-role="footer"><h4>© 2025 小奇Java面试</h4></div>
</div><div data-role="page" id="about"><div data-role="header"><h1>关于我们</h1></div><div data-role="content"><p>这是一个演示页面。</p><a href="#home" class="ui-btn">返回首页</a></div>
</div></body>
</html>
四、常用组件示例
4.1 按钮
<a href="#" class="ui-btn">按钮</a>
4.2 列表视图
<ul data-role="listview"><li><a href="#">列表项 1</a></li><li><a href="#">列表项 2</a></li>
</ul>
4.3 表单元素
<form><label for="name">姓名：</label><input type="text" name="name" id="name"><input type="submit" value="提交">
</form>
五、页面结构规则
每个页面放在一个 <div data-role="page"> 容器中，页面之间通过锚点跳转（如 #page1）。适合构建单页应用（SPA）结构。
六、注意事项
- jQuery Mobile 最佳搭配 jQuery 1.x 版本；
- 不再主动维护（1.4.5 是最后一个版本）；
- 适合快速原型开发和兼容旧设备的项目；
- 若开发现代移动应用，建议使用 Vue、React、Flutter 等替代方案。
七、常见问题
Q1: 样式加载失败？
确保 CSS 链接写在 <head> 中，并优先于 JS 脚本。
Q2: 页面跳转无反应？
检查是否遗漏 data-role="page"，或页面 ID 是否匹配。
八、推荐资源
- jQuery Mobile 官方网站
- 官方 API 文档
- jQuery Mobile 中文手册
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
