异步访问后端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
//1.在webstorm的相同文件夹下创建 index.html文件、和demo1.txt文件、jquery1.8.3包
$(document).ready(function(){ //入口函数
$("#div1").mouseover(function(){
url = "demo1.txt"
$("#div1").load(url) //ajax加载函数
})
$("#div1").mouseout(function(){
$("#div1").html(" ")
})
$("#button1").click(function(){
url = "demo1.txt"
$("#div1").load(url)
})
//获取id="p1"的元素内容,然后加载到指定的div里面
$("#button2").click(function(){
$("#div1").load("demo1.txt #p1")//在文件名后面,拼接一个该元素的id即可
})
//在load()方法中callback是可选的参数,callback(回调函数)规定当load方法完成后所需要执行的
//回调函数。callback回调函数的参数设置:
// responseTxt:包含回调成功后的返回结果内容(响应类容)
//statusTxt:回调状态
//eg: 首先load()方法完成后显示一个提示框,如果load方法执行成功,则显示"外部内容加载成功"
//如果失败,显示'错误信息'
//node : 成功 ----"success" 失败-----‘error’
$("#button3").click(function(){
$("#div1").load("demo1.txt",function(responseTxt,statusTxt){
if(statusTxt =='success'){
alert("外部内容加载成功")
}
if(statusTxt =='error'){
alert('错误信息')
}
})
})
/*JQuery---AJAX 的get()和post()方法: 主要用于通过HTTP GET 或 POST请求
* 从服务器里面请求数据。
* GET: 从指定的资源请求数据,GET基本上用于从服务器获取数据
* POST: 向指定的资源提交要处理的数据,POST也可以从服务器获取数据,并且
* 常用于连同请求一起发送数据。不会缓存(cookie)数据。
* */
//ajax---> get()方法, 语法: $("selector").get(url,callback)
// url ---必须参数, callback----可选参数
//eg: 使用get()方法从服务器上的一个文件中获取数据
$("#button4").click(function(){
jQuery.get("demo.php",function(data,status){
alert("数据:"+data+"\n状态:"+status)
})
})
/* $ === JQuery--全局函数
总结:
* 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规则传创建动画时,需要将其(函数名)绑定到某个选择器,否则不会产生动画效果。
*
*
* */
//方法二: 通过Jquery的新形式实现。
})
</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>
<h1>snudhuaihduiashsudhas</h1>
<p>sadiosdoasjiodji</p>
<span id="p1">text in span p1</span>
//1.在webstorm的相同文件夹下创建index.html文件和demo.txt文件,jquery文件//
在load()中callback是可选的参数,callback(回调函数)规定当“load”方法完成后所需要执行的
//回调函数。callback回调函数的参数设置;
//responseTxt 包含回调成功后的返回结果内容(相应类型)
//statexTxt 回调状态
//:eg 首先在load()方法成功完成后显示一个提示框,如果load方法执行成功,则提示“外部内容加载成功”
//如果失败
//node:成功——‘success’ 失败---‘error’
//jquery --ajax 的get()和post()方法:主要通过HTTP get或 post请求
//请求在服务器里面请求数据
get 问指定的资源提交要处理的数据
post 向指定的资源提交要处理的数据 post也可以从服务器获取数据并且
常用于同请求一起发送数据。不会缓存(cookie)数据。
//AJAX-->GET()方法, 语法:$(selector).get(url、callback)
//url-必需参数 callback-可选参数
//使用get方法从服务器上的一个文件。
/* $=== jquery--一个全局变量
总结:
* jquery ajax中load方法将返回的数据放在指定的元素中,不是全局函数
*get()同样是jquery的ajax的函数。它的作用把返回的数据交给用户处理。是全局函数
*
*load 的实现几乎等于get的实现,在ajax获取机制上没有区别。
*load方法的另一个和get的重要区别:load可以指定要插入文档的某个部分。
*/
轮播图
方法1.通过CSS3的animate以及@keyframes属性实现。
首先学习CSS3的@keyframes 和 animate
keyframes 创建动画,在@keyframes规定某个CSS样式,就是创建由当前样式逐渐变成样式的动画效果
浏览器支持internet explorer 10(ie10)、firefox、opera 支持animate属性以及@keyframes规则
eg:@keyframes 语法:@keyframes 函数名(自定义){
内容
}
eg:
@keyframes firstAnimate{
from{background:yellow}
to{background:red}
}
// safari 和 chrome
@-wekit-@keyframes firstAnimate{
from{background:yellow}
to{background:red}
}
css3 动画
用Animate规则创建动画时需要将其绑定某个选择器否则不会产生动画效果
(补充完整代码) /*
@keyframes firstAnimate {
0%{background:yellow;}
50%{background:red;}
100%{background; black;}
}
div{
animation: firstAnimate 3s;
height:100px;
width:100;
}
*/
/*
#screen{
height:9999px;
width:9999px;
animation: myfirst 3s;
}
#screen img{
float:left;
}
@keyframes myfirst{
0%{}
25%{transform:translateX(0px)}
30%{transform:translateX(0px)}
50%{transform:translateX(-300px)}
55%{transform:translateX(-300px)}
75%{transform:translateX(-600px)}
80%{transform:translateX(-600px)}
100%{transform:translateX(-900px)}
}
main{
width:300px;
height:300px;
overflow:hidden;
}
*/
/*
<div id="main">
<div id="screen">
<img src="" height:"200" width="300"/>
<img src="" height:"200" width="300"/>
<img src="" height:"200" width="300"/>
<img src="" height:"200" width="300"/>
<img src="" height:"200" width="300"/>
</div>
*/
方法2:通过jquery的新形式实现。