- jQuery 教程
- jQuery - 主页
- jQuery - 概述
- jQuery - 基础知识
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery-AJAX
- jQuery DOM 操作
- jQuery-DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链接
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先
- jQuery - 遍历后代
- jQuery用户界面
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 实用程序
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery-Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问题与解答
- jQuery - 快速指南
- jQuery - 有用的资源
- jQuery - 讨论
jQuery - Weather.js
Weather.js 是一个 jQuery 插件,用于查找有关天气详细信息的信息。
一个简单的 Weather.js 示例如下所示 -
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> <link href = 'https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel = 'stylesheet' type = 'text/css'> <link rel = "stylesheet" type = "text/css" href = "weather.css"> </head> <body id = "weather-background" class = "default-weather"> <canvas id = "rain-canvas"></canvas> <canvas id = "cloud-canvas"></canvas> <canvas id = "weather-canvas"></canvas> <canvas id = "time-canvas"></canvas> <canvas id = "lightning-canvas"></canvas> <div class = "page-wrap"> <header class = "search-bar"> <p class = "search-text"> <span class = "search-location-text"> What's the weather like in <input id = "search-location-input" class = "search-location-input" type = "text" placeholder = "City"> ? </span> </p> <div class = "search-location-button-group"> <button id = "search-location-button" class = "fa fa-search search-location-button search-button"> </button> <!-- --> <button id = "geo-button" class = "geo-button fa fa-location-arrow search-button"></button> </div> </header> <div id = "geo-error-message" class = "geo-error-message hide"> <button id = 'close-error' class = 'fa fa-times close-error'></button>Uh oh! It looks like we can't find your location. Please type your city into the search box above! </div> <div id = "front-page-description" class = "front-page-description middle"> <h1>Blank Canvas Weather</h1> </div> <div class = "attribution-links hide" id = "attribution-links"> <button id = 'close-attribution' class = 'fa fa-times close-attribution'></button> <h3>Icons from <a href = "https://thenounproject.com/"> Noun Project</a></h3> <ul> <li class = "icon-attribution"> <a href = "https://thenounproject.com/term/cloud/6852/"> Cloud</a> by Pieter J. Smits</li> <li class = "icon-attribution"> <a href = "https://thenounproject.com/term/snow/64/"> Snow</a> from National Park Service Collection</li> <li class = "icon-attribution"> <a href = "https://thenounproject.com/term/drop/11449/"> Drop</a> Alex Fuller</li> <li class = "icon-attribution"> <a href = "https://thenounproject.com/term/smoke/27750/"> Smoke</a> by Gerardo Martín Martínez</li> <li class = "icon-attribution"> <a href = "https://thenounproject.com/term/moon/13554/"> Moon</a> by Jory Raphael</li> <li class = "icon-attribution"> <a href = "https://thenounproject.com/term/warning/18974/"> Warning</a> by Icomatic</li> <li class = "icon-attribution"> <a href = "https://thenounproject.com/term/sun/13545/"> Sun</a> by Jory Raphael</li> <li class = "icon-attribution"> <a href = "https://thenounproject.com/term/windsock/135621/"> Windsock</a> by Golden Roof</li> </ul> </div> <div id = "weather" class = "weather middle hide"> <div class = "location" id = "location"></div> <div class = "weather-container"> <div id = "temperature-info" class = "temperature-info"> <div class = "temperature" id = "temperature"> </div> <div class = "weather-description" id = "weather-description"> </div> </div> <div class = "weather-box"> <ul class = "weather-info" id = "weather-info"> <li class = "weather-item humidity">Humidity: <span id = "humidity"></span>%</li><!----> <li class = "weather-item wind">Wind: <span id = "wind-direction"></span> <span id = "wind"></span> <span id = "speed-unit"></span></li> </ul> </div> <div class = "temp-change"> <button id = "celsius" class = "temp-change-button celsius">°C </button><button id = "fahrenheit" class = "temp-change-button fahrenheit"> °F</button> </div> </div> </div> </div> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script src = "weather.js"> </script> </div> </body> </html>
这应该产生以下结果 -
点击这里