jQuery学习——jQuery AJAX 及 图片轮播
一、jQuery AJAX
1.什么是AJAX
<1>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），简单来说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
<2>应用案例：谷歌地图、优酷视频、人人网等
2.jQuery-AJAX load()方法
<1>从服务器加载数据，并把数据放入我们指定的元素中
<2>语法
- $(selector).load(URL.data.callback)
- 必须的URL参数规定加载的地址
- 可选的data参数规定与请求一同发送的查询字符串（键值对集合）
3.自动获取练习
<1>获取外部文本
●代码如下：
demo1.txt内容：
123
html内容：
Title
●代码实现：
点击“获取外部文本”
<2>获取指定外部文本信息
●代码如下：
demo1.txt内容：
123
123456
html内容：
//2获取指定外部文本信息
$("#button2").click(function(){
$("#div1").load("demo1.txt #p1")
})●代码实现：
点击“获取指定外部文本信息” 
<3>获取外部信息有无回调函数
●代码如下：
demo1.txt内容：
123
123456
html内容：
//3、如下是获取外部信息有无回调函数
$("#button3").click(function(){
$("#div1").load("demo1.txt ",function(responseTxt,statusTxt){
if(statusTxt == "success"){
alert("外部内容加载成功")
}
if(statusTxt == "error"){
alert("错误信息")
}
})
})●代码实现：
点击“获取外部信息有无回调函数”
●知识点：
①在load()方法中callback是可选的参数，callback（回调函数）规定当load方法完成后所需要执行的回调函数，callback回调函数的参数设置
②responseTxt:包含回调成功后的返回结果内容(响应类型)
③statusTxt:回调状态
④eg:首先load()方法完成后显示一个提示框，如果load()方法换行成功，则显示“外部内容加载成功”，如果失败，显示“错误信息”
⑤node:成功-“success” 失败-“error”
<4>获取外部信息有无回调函数
●代码如下：
demo.php内容：
html内容：
//4、如下是获取数据状态
$("#button4").click(function(){
jQuery.get("demo.php",function(data,status){
alert("数据："+data+"\n状态："+status)
})
})●代码实现：
点击“获取数据状态”
●知识点：
①jQuery--AJAX 的get()和post()方法：主要用于通过HTML GET 或 POST请求从服务器里面请求数据
②GET;从指定的资源请求数据，GET基本上用于从服务器获取数据
③POST:向指定的资源提交要处理的数据,POST也可以从服务器获取数据，并且常用于连同请求一起发送数据。不会缓存（cookie）数据
④AJAX --get()方法，语法：$("selector").get(url,callback)
⑤url--必选参数， callback--可选参数
⑥eg：使用get()方法从服务器上的一个文件中获取数据
4.总结：
<1>jquery ajax中的load方法将返回的数据放在指定的元素中，不是全局函数。
<2>get()同样是jquery的ajax的函数，它的作用把返回的数据交给用户处理，是全局函数
<3>load 的实现几乎等同于get的实现，在ajax获取机制上没有区别。
<4>load方法的另一个和get 的重要区别：load可以指定要插入文档的某个部分。
二、图片轮播
方法一: 通过CSS3的animation属性以及 @keyframes规则实现
1.首先学习 CSS3当中的@keyframes和animation
<1>@keyframes规则---用于创建动画，在@keyframes中规定某个CSS样式，就能创建,由当前样式逐渐变成新样式的动画效果。
<2>浏览器支持：Internet Explorer 10 （IE10）、Firefox 、Opera 支持 animation属性以及 @keyframes规则、chrome、Safari 需要加前缀 "-webkit-"
* 注： IE9 以及更早的版本，不支持 animation属性以及 @keyframes规则
2.@keyframes 语法：
@keyframes 函数名(自定义){
内容
}eg：
@keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
// safari和chrome
@-webkit-keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
3.CSS3 动画：用@keyframes规则传创建动画时，需要将其(函数名)绑定到某个选择器，否则不会产生动画效果。
4.练习
图片轮播①
●代码如下：
Title
●代码实现：
→ → 
→ → 
图片轮播②
●代码如下：
Title
●代码实现：(注：这是一个连续性动作)
→ 
→
→ 