jQuery Mobile 安装使用教程

一、jQuery Mobile 简介

jQuery Mobile 是 jQuery 团队推出的移动设备优先的 Web 框架，旨在帮助开发者快速构建响应式、跨平台的 HTML5 移动应用界面。它适用于手机、平板甚至桌面浏览器。

二、安装 jQuery Mobile

2.1 通过 CDN 引入（推荐）

将以下代码加入 HTML 页面 <head> 中：

html 复制代码

<!-- 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 文件引用到你的项目中。

三、快速上手示例

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.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 按钮

html 复制代码

<a href="#" class="ui-btn">按钮</a>

4.2 列表视图

html 复制代码

<ul data-role="listview">
  <li><a href="#">列表项 1</a></li>
  <li><a href="#">列表项 2</a></li>
</ul>

4.3 表单元素

html 复制代码

<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 是否匹配。

八、推荐资源

本文由"小奇Java面试"原创发布，转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。