学习周记做一个天气预报

最新推荐文章于 2021-12-14 17:50:46 发布

「理想家」

最新推荐文章于 2021-12-14 17:50:46 发布

阅读量157

点赞数 5

本文链接：https://blog.csdn.net/estheri/article/details/116752666

版权

jQuery

实验3 天气预报查询
一些知识点

实验3 天气预报查询

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			
   		});  

		$(document).ready(function(){
			$("button").click(function(){
				var city=$("#city").val();
				$.ajax({
					type:"GET",
					url:"http://wthrcdn.etouch.cn/weather_mini?city="+city,
					dataType:"json",
					success:function(result){
						addBox(result.data.forecast);
					}
				})
			});
		});		
			
				
		function addBox(json_data) {
			
				$.each(json_data, function(index, obj) {
					
					$("#box").append("<div'>" +
						
							"<p>" + obj['date'] + "</p>" +
														
							"<p>" + obj['high'] + "</p>" +
							
							"<p>" + obj['fengli'] + "</p>" +
							
							"<p>" + obj['low'] + "</p>" +
							
							"<p>" + obj['fengxiang'] + "</p>" +
							
							"<p>" + obj['type'] + "</p>" +
							
							"</div>");
				});							
		}
    </script>
	
</head>
<body>
	<div>
		<h3>请输入城市：</h3>
		城市：<input type="text" id="city"/>
		<br>
		<button type="button">提交</button>
	</div>
	
	<br>
	
	<div id="box"></div>	
	
</body>
</html>

效果展示：
在这里插入图片描述

一些知识点

addClass()	  向被选元素添加一个或多个类名
after()	      在被选元素后插入内容
append()	  在被选元素的结尾插入内容
appendTo()	  在被选元素的结尾插入 HTML 元素
attr()	      设置或返回被选元素的属性/值
before()	  在被选元素前插入内容

<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p:first").addClass("intro");
	});
});
</script>
<style>
.intro{
	font-size:150%;
	color:red;
}
</style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>给第一个P元素添加一个类名</button>

</body>

结果：
在这里插入图片描述

jQuery 库 - 特性

jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

基础语法

$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例：
$(this).hide() -  隐藏当前元素
$("p").hide()  -  隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","red");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>