jQuery Mobile是一個面向移動設備的jQuery插件，幫助開發者快速構建動態Web應用程序?？梢杂糜趧摻▽崿F蘋果、Android、Windows等操作系統的Web應用程序，同時保證在不同平臺下具有一致的用戶界面和操作體驗。相比于傳統的編寫繁瑣的Javascript代碼，jQuery Mobile通過簡潔明了的HTML代碼生成豐富的UI界面，大大減輕了Web開發者的工作負擔。
要使用jQuery Mobile，我們首先要引入jQuery庫和jQuery Mobile庫。jQuery庫是jQuery Mobile的基礎，所以必須先引入jQuery庫，如下所示：
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head>
引入jQuery庫后，再引入jQuery Mobile庫，如下所示：
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script> </head>
引入jQuery Mobile庫后，我們就可以開始使用jQuery Mobile的組件了。例如，下面的代碼展示了如何使用jQuery Mobile的按鈕組件：
<div data-role="page"> <div data-role="header"> <h1>歡迎來到jQuery Mobile的世界</h1> </div> <div data-role="content"> <a href="#" data-role="button" data-icon="home" data-inline="true">首頁</a> <a href="#" data-role="button" data-icon="star" data-inline="true">收藏</a> <a href="#" data-role="button" data-icon="search" data-inline="true">搜索</a> </div> <div data-role="footer"> <h4>底部版權信息</h4> </div> </div>
代碼中，我們通過data-role屬性指定元素的類型，例如<div data-role="header">表示這是一個頭部元素。另外，還傳遞了多個屬性參數給按鈕元素，如data-icon、data-inline等，讓按鈕元素更加符合設計要求。
總之，jQuery Mobile是一個非常實用的移動端開發插件，通過簡單的HTML代碼和少量的Javascript代碼就能實現較為復雜的移動應用，十分方便易用。