1.什么是jquery AJAX?
AJAX=异步(Asynchronous)异步Javascript和XML(json)
AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。
应用案列:谷歌地图,优酷视频,人人网。
2.jQuery - AJAX load() 方法
jQuery load() 方法:load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
一:AJAX运用
1. 这是示例文件("demol.txt")的内容:
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
2.下面的例子把 "demo.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
$("#div1").load("demo1.txt #p1")
3.可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
4. 首先load()方法完成后显示一个提示框,如果load方法执行成功,则显示"外部内容加载成功"
如果失败,显示'错误信息'
node : 成功 "success" 失败‘error’
5.JQuery---AJAX 的get()和post()方法: 主要用于通过HTTP GET 或 POST请求
从服务器里面请求数据。
GET: 从指定的资源请求数据,GET基本上用于从服务器获取数据
POST: 向指定的资源提交要处理的数据,POST也可以从服务器获取数据,并且
常用于连同请求一起发送数据。不会缓存(cookie)数据。
ajax---> get()方法, 语法: $("selector").get(url,callback)
url ---必须参数, callback----可选参数
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").mouseover(function(){
url = "demo1.txt"
$("#div1").load(url)
})
$("#div1").mouseout(function(){
$("#div1").html(" ")
})
$("#button1").click(function(){
url = "demo1.txt"
$("#div1").load(url)
})
$("#button2").click(function(){
$("#div1").load("demo1.txt #p1")
})
$("#button3").click(function(){
$("#div1").load("demo1.txt",function(responseTxt,statusTxt){
if(statusTxt =='success'){
alert("外部内容加载成功")
}
if(statusTxt =='error'){
alert('错误信息')
}
})
})
$("#button4").click(function(){
jQuery.get("demo.php",function(data,status){
alert("数据:"+data+"\n状态:"+status)
})
})
</script>
</head><body>
<div id="div1" style="background-color: rgb(204,204,153);
width: 200px;height:400px;overflow: scroll"></div>
<button id="button1">获取外部信息</button>
<button id="button2">获取指定外部信息</button>
<button id="button3">获取外部信息有回调函数</button>
<button id="button4">发送HTTP get请求并获取返回结果</button>
</body>
</html>
效果图:
代码总结: jquery ajax中的load方法将返回的数据放在指定的元素中,不是全局函数。 get()同样是jquery的ajax的函数,它的作用把返回的数据交给用户处理,是全局函数 load 的实现几乎等同于get的实现,在ajax获取机制上没有区别。 load方法的另一个和get 的重要区别:load可以指定要插入文档的某个部分。
二:图片轮播
方法一: 通过CSS3的animation属性以及 @keyframes规则实现
首先学习 CSS3当中的@keyframes和animation
@keyframes规则---用于创建动画,在@keyframes中规定某个CSS样式,就能创建
由当前样式逐渐变成新样式的动画效果。
浏览器支持:
Internet Explorer 10 (IE10)、Firefox 、Opera 支持 animation属性以及 @keyframes规则
chrome、Safari 需要加前缀 "-webkit-"
注: IE9 以及更早的版本,不支持 animation属性以及 @keyframes规则
@keyframes 语法:
@keyframes 函数名(自定义){
内容
}
eg:
@keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
safari和chrome
@-webkit-keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
CSS3 动画
用@keyframes规则传创建动画时,需要将其(函数名)绑定到某个选择器,否则不会产生动画效果。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#screen{height:9999px;width:9999px;animation:myfirst 8s;}
#screen img{float:left;}
#main{height:300px;width:200px;overflow:hidden;}
@keyframes myfirst {
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 id="main">
<div id="screen">
<img src="background-image/list_1.jpg" height="200"width="300">
<img src="background-image/list_2.jpg" height="200"width="300">
<img src="background-image/list_3.jpg" height="200"width="300">
<img src="background-image/list_4.jpg" height="200"width="300">
</div>
</div>
</body>
</html>
效果:
描述:图片向左缓慢水平滑动变换图片
animation属性: 是设置动画的一种元素 。
transform属性:是图片改变的一种变形属性,该任务运用属性中的平移属性translate属性。