jQuery Mobile是一款基于jQuery的移動設備端開發框架，它提供了一種快速構建移動應用的方式。下面給大家介紹一下jQuery Mobile的開發指南。
首先我們需要引入jQuery和jQuery Mobile的庫文件：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" > <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.js"></script> </head>然后我們需要定義一個頁面，每個頁面都被包裹在一個div里面，div的id需要是"data-role=page"，同時我們需要為每個頁面定義一個標題：
<div data-role="page" id="page1"> <div data-role="header"> <h1>Page 1</h1> </div> <div data-role="main" class="ui-content"> <p>This is page 1.</p> </div> </div>接下來我們需要定義導航菜單，導航菜單通常被放置在頁面的頭部。我們可以使用listview來創建導航菜單：
<div data-role="page" id="page1"> <div data-role="header"> <h1>Page 1</h1> <div data-role="navbar"> <ul> <li><a href="#page1" class="ui-btn-active">Page 1</a></li> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>This is page 1.</p> </div> </div>最后，我們可以使用樣式來美化我們的頁面。jQuery Mobile提供了很多樣式類可以使用，我們只需要在元素上添加對應的類即可：
<div data-role="page" id="page1"> <div data-role="header" data-theme="a"> <h1>Page 1</h1> <div data-role="navbar" data-theme="a"> <ul> <li><a href="#page1" class="ui-btn-active">Page 1</a></li> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> </ul> </div> </div> <div data-role="main" class="ui-content" data-theme="a"> <p>This is page 1.</p> </div> </div>以上就是jQuery Mobile的基礎開發指南，希望對大家有所幫助。