jQuery Mobile 是一個流行的開源移動應用程序框架，可以幫助開發人員快速創建流暢、響應式的移動應用程序。在這篇文章中，我們將學習如何使用 jQuery Mobile 迭代創建天氣應用程序。

// 天氣應用程序的核心代碼
$(document).on("pagecreate", "#weather-page", function() {
// 獲取當前位置信息
navigator.geolocation.getCurrentPosition(function(position) {
// 獲取本地天氣信息
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&appid=YOUR_APPID", function(data) {
// 在頁面上顯示天氣信息
var weather = "當前天氣: " + data.weather[0].description + "，溫度: " + Math.round(data.main.temp - 273.15) + "℃";
$("#weather-info").text(weather);
});
});
});

代碼中，我們首先使用內置的navigator.geolocation對象獲取當前位置信息。接著，使用 OpenWeatherMap 的 API 獲取本地天氣信息，并將其顯示在頁面上。

在 HTML 中，我們使用以下代碼創建天氣頁面：

<div data-role="page" id="weather-page">
<div data-role="header">
<h1>天氣應用程序</h1>
</div>
<div data-role="content">
<h2>當前天氣</h2>
<p id="weather-info">正在加載...</p>
</div>
</div>

在頁面加載時，我們注冊一個pagecreate事件，對應代碼中的第一行。當頁面創建完成后，我們將獲取當前位置信息并在頁面上顯示天氣的邏輯包裝在該事件處理函數中。

在天氣頁面的頭部，我們使用 jQuery Mobile 的data-role="header"定義了一個標題。在頁面的主要內容區域中，我們顯示天氣信息，并將其顯示在<p>元素中。當天氣信息加載完成之前，我們顯示“正在加載...”這個提示信息。

綜上所述，通過使用 jQuery Mobile，我們可以輕松地創建出流暢響應、實時顯示天氣信息的移動應用程序。