jQuery Mobile 作為一個用戶界面框架，提供了很多交互和UI的組件。它繼承 jQuery 庫的特性和優勢。下面，我們通過一個簡單的實例來了解一下 jQuery Mobile。
<head> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Welcome to jQuery Mobile!</h1> </div> <div data-role="main" class="ui-content"> <p>jQuery Mobile 是一個 HTML5 的用戶界面框架，是jQuery組件庫的擴展。它提供了交互組件和UI控件，讓我們快速實現可復用的移動應用程序界面。</p> <ul data-role="listview"> <li><a href="#">列表項1</a></li> <li><a href="#">列表項2</a></li> <li><a href="#">列表項3</a></li> </ul> </div> <div data-role="footer"> <h2>歡迎使用 jQuery Mobile!</h2> </div> </div> </body>
上面的代碼是一個包含頭部、主體、底部的頁面布局，其中主體中包含一個列表的實例。這里我們使用了 jQuery Mobile 的 data-role 屬性來定義不同的組件，如 page、header、main、listview、footer 等。同時，我們引入了 jQuery Mobile 的樣式表和JS庫。
通過這個簡單的實例，我們可以了解到，使用 jQuery Mobile 可以快速地創建可重用的移動應用程序界面，它提供了很多交互組件和UI控件，可以幫助我們輕松創建出漂亮的移動應用程序。