jQuery Mobile教程从哪开始学？-杰瑞科技汇

jQuery Mobile 教程：从零开始构建移动 Web 应用

第一部分：什么是 jQuery Mobile？

jQuery Mobile 是一个基于 jQuery 的 Web 应用框架，专门用于在智能手机、平板电脑和桌面设备上创建响应式、触摸友好的用户界面。

（图片来源网络，侵删）

核心特点：

跨平台兼容性： 一套代码，可以在 iOS、Android、BlackBerry、Windows Phone 等几乎所有主流移动操作系统上运行。
渐进式增强： 核心功能在所有浏览器中都能正常工作，而在高级浏览器（尤其是移动浏览器）上,它会提供额外的触摸体验和视觉效果。
触摸优化： 组件专为触摸交互设计，如大尺寸的点击区域、流畅的页面切换动画等。
响应式设计： 界面会自动适应不同屏幕尺寸,无论是手机还是平板。
丰富的 UI 组件： 提供了大量开箱即用的 UI 组件，如按钮、工具栏、列表、表单、弹窗等，无需编写大量 CSS 和 JavaScript。

⚠️ 重要提示：jQuery Mobile 的现状

虽然 jQuery Mobile 仍然可用，但它已经不再是移动开发的主流技术，开发者更倾向于使用 原生应用（使用 Swift/Kotlin 或 React Native/Flutter 等跨平台框架）或现代化的单页应用框架（如 Vue.js、React、Angular）。

为什么还要学习它？
（图片来源网络，侵删）

维护旧项目：很多企业遗留项目仍在使用 jQuery Mobile。

快速原型：对于非常简单的移动页面,它上手极快。

教学价值：它能很好地展示响应式和移动优先的设计思想。

第二部分：环境搭建与第一个页面

jQuery Mobile 的核心是 HTML5，你不需要复杂的构建工具,只需引入几个文件即可开始。

引入必要的文件

在你的 HTML 文件的 <head> 标签中，引入 jQuery Mobile 的 CSS 和 JavaScript 文件，为了方便，我们可以使用 CDN（内容分发网络）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- jQuery Mobile 核心样式 -->
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- jQuery 核心库 -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- jQuery Mobile 核心库 -->
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 你的页面内容将在这里 -->
</body>
</html>

创建一个基本页面结构

（图片来源网络，侵删）

jQuery Mobile 的页面结构非常独特，一个 HTML 文件可以包含多个“页面”，每个页面都有一个 data-role="page" 的容器。

data-role="page"：定义一个独立的页面视图。
data-role="header"：页面顶部导航栏。
data-role="content"：页面的主要内容区域。
data-role="footer"：页面底部导航栏。

示例：第一个页面

<!DOCTYPE html>
<html>
<head>
    <!-- ... 引入文件 ... -->我的第一个 jQuery Mobile 页面</title>
</head>
<body>
<!-- 页面 1 -->
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>欢迎</h1>
    </div>
    <div data-role="content">
        <p>这是我的第一个 jQuery Mobile 页面内容。</p>
        <a href="#page2" class="ui-btn">前往第二页</a>
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
<!-- 页面 2 -->
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>第二页</h1>
    </div>
    <div data-role="content">
        <p>这是第二页的内容。</p>
        <a href="#page1" class="ui-btn">返回第一页</a>
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
</body>
</html>

解释：

我们在同一个 HTML 文件中定义了两个 div，它们的 data-role 都是 "page"，分别有 id 为 page1 和 page2。
当你点击“前往第二页”的链接时，jQuery Mobile 会自动处理页面切换,而不是像传统网页那样跳转和刷新。
class="ui-btn" 会将一个普通的 <a> 标签自动美化成一个移动端风格的按钮。

第三部分：核心 UI 组件

jQuery Mobile 的强大之处在于其丰富的组件。

按钮

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

不同样式： 使用 data-theme 属性，data-theme="a" 到 data-theme="e" 有不同的颜色主题。

<a href="#" class="ui-btn ui-btn-a">主题 A 按钮</a>
<a href="#" class="ui-btn ui-btn-b">主题 B 按钮</a>

图标按钮： 使用 data-icon 属性。

<a href="#" class="ui-btn ui-btn-icon-left ui-icon-search">搜索</a>
<!-- 更多图标: ui-icon-arrow-r, ui-icon-home, ui-icon-star 等 -->

列表

基本列表：

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

带图标的列表： 在 <a> 标签内添加 <img> 或使用 data-icon。

<ul data-role="listview">
    <li><a href="#"><img src="icon.png" alt="图标"><h3>标题</h3><p>描述信息</p></a></li>
</ul>

可折叠列表：

<div data-role="collapsible">
    <h4>点击我展开</h4>
    <p>这里是折叠的内容。</p>
</div>

表单元素

jQuery Mobile 会自动美化标准的 HTML 表单元素。

<form>
    <div data-role="fieldcontain">
        <label for="name">姓名:</label>
        <input type="text" name="name" id="name" data-clear-btn="true">
        <label for="slider">滑块:</label>
        <input type="range" name="slider" id="slider" min="0" max="100" value="50">
        <label for="flip">开关:</label>
        <select name="flip" id="flip" data-role="slider">
            <option value="off">关</option>
            <option value="on">开</option>
        </select>
        <label for="select-choice-1" class="select">选择一个选项:</label>
        <select name="select-choice-1" id="select-choice-1">
            <option value="choice-1">选项 1</option>
            <option value="choice-2">选项 2</option>
        </select>
    </div>
    <button type="submit" class="ui-btn">提交</button>
</form>

弹窗

弹窗用于显示重要信息或确认对话框。

<!-- 1. 创建一个触发弹窗的链接 -->
<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-info ui-btn-icon-left">更多信息</a>
<!-- 2. 创建弹窗内容 -->
<div data-role="popup" id="myPopup">
    <p>这是一个弹窗！点击外部区域可以关闭。</p>
</div>
<!-- 3. (可选) 创建一个确认对话框 -->
<a href="#confirmDialog" data-rel="popup" data-transition="pop" class="ui-btn">删除项目</a>
<div data-role="popup" id="confirmDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false">
    <div data-role="header" data-theme="a">
        <h1>确认</h1>
    </div>
    <div data-role="content" data-theme="c">
        <p>你确定要删除这个项目吗？</p>
        <a href="#" data-rel="back" class="ui-btn ui-btn-c ui-corner-all ui-shadow">取消</a>
        <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow">确认</a>
    </div>
</div>

第四部分：页面事件与交互

jQuery Mobile 提供了专用的事件来处理页面生命周期。

常用事件：

pageinit：页面初始化完成后触发，只执行一次,适合在这里进行数据加载等初始化操作。
pagebeforeshow：页面即将显示前触发,适合在页面显示前更新内容。
pageshow：页面显示后触发。

示例：动态加载列表数据

<div data-role="page" id="dynamic-list-page">
    <div data-role="header">
        <h1>动态列表</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" id="my-list">
            <!-- 列表项将通过 JavaScript 动态添加 -->
        </ul>
    </div>
</div>
<script>
$(document).on("pageinit", "#dynamic-list-page", function() {
    // 模拟从服务器获取数据
    var data = [
        { title: "新闻标题 1", link: "#" },
        { title: "新闻标题 2", link: "#" },
        { title: "新闻标题 3", link: "#" }
    ];
    var list = $("#my-list");
    list.empty(); // 清空现有列表
    $.each(data, function(index, item) {
        list.append("<li><a href='" + item.link + "'>" + item.title + "</a></li>");
    });
    // 刷新列表视图，使其应用 jQuery Mobile 的样式
    list.listview("refresh");
});
</script>

第五部分：实战案例 - 简单的待办事项应用

让我们结合所学,创建一个简单的待办事项应用。

功能：

显示待办事项列表。
可以添加新的待办事项。
可以删除待办事项。

代码 (index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">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.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        /* 为了美观，可以添加一些自定义样式 */
        .delete-btn {
            float: right;
        }
    </style>
</head>
<body>
<!-- 主页面 -->
<div data-role="page" id="main-page">
    <div data-role="header">
        <h1>我的待办事项</h1>
    </div>
    <div data-role="content">
        <form id="add-form">
            <input type="text" name="new-item" id="new-item" placeholder="输入新任务..." data-clear-btn="true">
            <button type="submit" class="ui-btn ui-corner-all ui-shadow">添加</button>
        </form>
        <ul data-role="listview" id="todo-list">
            <!-- 初始任务 -->
            <li><a href="#">学习 jQuery Mobile <a href="#" class="delete-btn" data-icon="delete" data-iconpos="notext">删除</a></a></li>
            <li><a href="#">构建应用 <a href="#" class="delete-btn" data-icon="delete" data-iconpos="notext">删除</a></a></li>
        </ul>
    </div>
</div>
<script>
$(document).on("pageinit", "#main-page", function() {
    // 添加新任务
    $("#add-form").on("submit", function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
        var newItemText = $("#new-item").val();
        if (newItemText) {
            var list = $("#todo-list");
            list.append("<li><a href='#'>" + newItemText + " <a href='#' class='delete-btn' data-icon='delete' data-iconpos='notext'>删除</a></a></li>");
            list.listview("refresh"); // 刷新列表视图
            $("#new-item").val(""); // 清空输入框
        }
    });
    // 删除任务
    $("#todo-list").on("click", ".delete-btn", function(e) {
        e.preventDefault();
        e.stopPropagation(); // 阻止事件冒泡，避免触发链接的点击
        $(this).closest("li").slideUp(300, function() {
            $(this).remove();
        });
    });
});
</script>
</body>
</html>

代码解释：

HTML 结构： 包含一个输入框和表单用于添加任务，一个 ul 列表用于显示任务。
pageinit 事件： 当页面初始化时,绑定事件处理函数。
添加任务：
- 监听表单的 submit 事件。
- 获取输入框的值。
- 动态创建 <li> 元素并添加到列表中。
- 调用 listview("refresh") 是关键，它告诉 jQuery Mobile 重新渲染列表,新添加的项才会拥有正确的样式和功能。
删除任务：
- 使用事件委托，在 #todo-list 上监听 .delete-btn 的点击事件，这样即使动态添加了按钮,也能正常工作。
- closest("li") 找到按钮所在的列表项。
- slideUp(300, ...) 添加一个滑动消失的动画，动画结束后用 $(this).remove() 从 DOM 中移除元素。

第六部分：资源与总结

学习资源：

官方文档 (Archive.org): 由于官方域名已下线，可从 Internet Archive 访问：https://web.archive.org/web/20250416162039/https://jquerymobile.com/
API 文档: https://api.jquerymobile.com/

jQuery Mobile 是一个强大且易用的移动 Web 开发框架，它通过 HTML5 的 data- 属性极大地简化了 UI 的创建和交互的实现，它遵循“写更少的代码，做更多的事”的理念。

尽管它已不再是现代开发的首选，但理解其工作原理对于维护旧项目或快速构建原型仍然非常有价值，通过本教程，你应该已经掌握了 jQuery Mobile 的基本用法，能够独立构建简单的移动 Web 应用。

jQuery Mobile教程从哪开始学？

jQuery Mobile 教程：从零开始构建移动 Web 应用

第一部分：什么是 jQuery Mobile？

第二部分：环境搭建与第一个页面

第三部分：核心 UI 组件

第四部分：页面事件与交互

第五部分：实战案例 - 简单的待办事项应用

第六部分：资源与总结

99ANYc3cd6

Java中sleep和wait有何核心区别？

FontCreator教程怎么学？入门到精通技巧有哪些？

Java Web开发实战视频，如何快速入门？

SketchUp教程PDF哪里找？

Python中readline如何使用？

Python行为树如何实现高效决策控制？

Java类间多层函数调用如何实现？

Java的Date与MySQL的Date如何正确转换？

Python线程模块如何高效创建与管理？

Java单例synchronized如何高效保证线程安全？

adventures in python

VB 6.0教程，从零开始学怎么入门？

Photoshop CS2视频教程，新手如何快速入门？

Java中equals与hashCode为何要同时重写？

Solidworks 2025视频教程有哪些新功能？

Java String转Double怎么转？

jQuery Mobile教程从哪开始学？

jQuery Mobile 教程：从零开始构建移动 Web 应用

第一部分：什么是 jQuery Mobile？

第二部分：环境搭建与第一个页面

第三部分：核心 UI 组件

第四部分：页面事件与交互

第五部分：实战案例 - 简单的待办事项应用

第六部分：资源与总结

相关推荐

Python行为树如何实现高效决策控制？