jquery天气插件

以下是一些流行的 jQuery 天气插件及其使用方法，供参考：

Weather.js

Weather.js 是一个轻量级的 jQuery 插件，用于获取和显示天气数据。支持多种天气 API（如 OpenWeatherMap）。

安装方法
在 HTML 中引入 jQuery 和 Weather.js：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.weather.js"></script>

基本用法
通过 API 获取天气数据并显示：

$('#weather-container').weather({
  key: 'YOUR_API_KEY', // 替换为 OpenWeatherMap API Key
  city: 'Beijing',
  units: 'metric', // 或 'imperial'
  descriptionTarget: '.weather-description',
  tempTarget: '.weather-temp',
  iconTarget: '.weather-icon'
});

SimpleWeather.js

SimpleWeather.js 是另一个流行的插件，支持多种天气服务（如 Yahoo Weather API）。

安装方法
引入插件文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>

调用示例
获取并显示天气信息：

$.simpleWeather({
  location: 'San Francisco, CA',
  woeid: '', // 可选，Yahoo Weather 的 WOEID
  unit: 'c',
  success: function(weather) {
    $('#weather').html(
      '<h2>'+weather.city+'</h2>'+
      '<div>'+weather.temp+'°'+weather.units.temp+'</div>'+
      '<div>'+weather.currently+'</div>'
    );
  },
  error: function() {
    $('#weather').html('Failed to load weather data.');
  }
});

WeatherWidget

WeatherWidget 提供更丰富的 UI 组件，适合直接嵌入页面。

安装方法
通过 CDN 引入：

<link rel="stylesheet" href="path/to/weather-widget.css">
<script src="path/to/jquery.weather-widget.js"></script>

初始化
配置选项并渲染：

$('#widget').weatherWidget({
  apiKey: 'YOUR_API_KEY',
  location: 'London',
  units: 'metric',
  showIcon: true,
  showWind: true
});

注意事项

• 使用天气插件通常需要注册天气 API 服务（如 OpenWeatherMap、Yahoo Weather 等）并获取 API Key。
• 部分插件可能依赖 CSS 文件以正确显示样式。
• 免费天气 API 通常有调用次数限制，需注意配额。

以上插件均可通过 GitHub 或官方文档找到更多配置选项和示例。