Web实训知识点_0514

最新推荐文章于 2019-07-09 23:40:15 发布

原创最新推荐文章于 2019-07-09 23:40:15 发布 · 499 阅读

CC 4.0 BY-SA版权

本文主要介绍了jQuery中AJAX的相关内容，重点对比了load和get方法。load方法将返回数据放在指定元素中，非全局函数；get方法把返回数据交给用户处理，是全局函数。二者在AJAX获取机制上无差别，但load可指定插入文档的部分。还提及了获取外部文件的方法及相关参数设置。

jQuery中的AJAX:

1.jquery ajax中的load方法将返回的数据放在指定的元素中，不是全局函数。

2.get()同样是jquery的ajax的函数，它的作用把返回的数据交给用户处理，是全局函数

3.load 的实现几乎等同于get的实现，在ajax获取机制上没有区别。

获取外部文件的方法：load（）

在load（）方法中cellback是一个可选的参数，在load方法完成后所需要执行的
回调函数。cellback的回调函数的参数设置：
responseTxt：回复，答复。相应内容。包含回调成功的结构内容
statusTxt：是否回调成功，用true和false表示

注意：CSS3 动画用@keyframes规则传创建动画时，需要将其(函数名)绑定到某个选择器，否则不会产生动画效果
通过Jquery的新形式实现

ajax--->get()方法，语法：$('selector').get(url,cellback)

URL：是必须参数
cellback：是可选参数

eg：使用get方法从服务器的文件中获取数据

PS：load(),get(),post()的区别，
在于load()不是全局的方法，get()和post()是全局变量
这也是为什么在get()和post()的前面不用写选择器

总结：jQuery ajax中的load方法将返回的数值放在指定的元素中，不是全局函数
get同样是jQuery ajax中的函数，他的作用把返回的数据交给用户处理，是全局函数

load的实现几乎等同于get的实现，在ajax获取机制上没有差别
load方法的另一个和get的重要区别：load可以指定要插入文档的某个部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播图——css3</title>
		<style>
			@keyframes divColor{
				to {background: yellow;};
				from {background: red;};
			}
			.screen{
				width: 9999px;
				height: 9999px;
				-webkit-animation: first 8s linear infinite;
			}
			.screen img{
				float: left;
			}
			.main{
				width: 300px;
				height: 200px;
				overflow: hidden;
			}
			@keyframes first{
				25%{transform: translateX(0px);}
				30%{transform: translateX(-300px);}
				50%{transform: translateX(-300px);}
				55%{transform: translateX(-600px);}
				75%{transform: translateX(-600px);}
				80%{transform: translateX(-900px);}
				100%{transform: translateX(-900px);}
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="screen">
				<img src="img/2.jpg" height="200" width="300" />
				<img src="img/背景1.png" height="200" width="300" />
				<img src="img/1.jpg" height="200" width="300" />
				<img src="img/背景图1.jpg" height="200" width="300" />
				<img src="img/落日.jpg" height="200" width="300" />
			</div>
		</div>
	</body>
</html>