第十一周周记_笫11周周记-CSDN博客

本文链接：https://blog.csdn.net/YX010831/article/details/116752601

第十一周周记

知识点复习
代码的实现

知识点复习

jQuery简单运用
jQuery代码固定格式
jQuery 类选择器可以通过指定的 class 查找元素。
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);

jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。

语法:
$(selector).fadeOut(speed,callback);

jQuery 效果- 动画
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

JSON 语法规则
JSON 语法是 JavaScript 对象表示语法的子集。
· 数据在名称/值对中
· 数据由逗号分隔
· 大括号 {} 保存对象
· 中括号 [] 保存数组，数组可以包含多个对象
AJAX - 创建 XMLHttpRequest 对象
创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject(“Microsoft.XMLHTTP”);

AJAX - 向服务器发送请求请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open(“GET”,“ajax_info.txt”,true);
xmlhttp.send();

AJAX - 服务器响应
responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

实例：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

代码的实现

1.实验3：简单城市天气查询系统

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>北京城市天气</title>
			<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

		<script>
                  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",	//数据类型，可以是 text xml json  script  jsonp	 
			　　　　　　　　　success: function(result){	//result是响应信息返回的结果，此处包含了返回的json对象	 
			                    addBox(result.data.forecast);	 //调用addBox函数，将result数据添加到box容器中
			                }	 
			          });
				});
			});
			
	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>