Jquery之ajax
JQuery动画效果
一、动画效果
1.淡出
格式:$(selector).fadeout(“时间”),默认是500ms
2.淡入
格式:$(selector).fadein(“时间”),默认是500ms
3.下拉
格式:$(selector).slideDown(“时间”),默认是500ms
4.上拉
格式:$(selector).slideUp(“时间”),默认是500ms
5.自动上下拉
格式:$(selector).fadeout(“时间”),默认是500ms
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: red;
width: 100px;
height: 100px;
display: none;
}
.test {
display: none;
}
</style>
<script src="../static/js/jquery.min.js"></script>
</head>
<body>
<button id="Btn">点我</button>
<div></div>
</body>
<script>
$("#Btn").click(function () {
// $("div").toggleClass("test");
//$("div").fadeOut();//淡出
// $("div").fadeIn();
// $("div").slideDown();//下拉
// $("div").slideUp();//上拉
$("div").slideToggle();//自动上下拉
})
</script>
</html>
二、信息存储
本地存储(LocalStorage)
本地存储(LocalStorage)是一种永久性存储,将服务器传过来的信息保存在本地中,及时浏览器关闭也不会清除。会一直保留着。
<script>
//设置存储(键值对的形式)
localStorage.setItem("name","zhuangwanwan");
localStorage.setItem("sex","男");
//获取存储信息(用键来获取)
localStorage.getItem("name");//获取到“zhuangwanwan”
//删除存储
//1.删除指定存储(用键来删)
localStorage.removeItem("name");
//2.删除所有存储
localStorage.clear();
</script>
会话层存储(SessionStorage)
和本地存储类似,但是关闭浏览器时,存储的信息就会被删除。
三、使用JQ进行Ajax请求
<script>
$.ajax({
//请求服务器的路径
url:"传入请求的路径",
//请求方式
method:"传出请求方法(POST/GET)",
//允许服务器返回来的数据类型
dataType:"json",
data:{
//data数据
}
//成功
success:function(res){
//成功收到服务器传来的消息时的代码块
}
//失败
error:function(res){
//没有收到服务器传来的消息时的代码块
}
})
</script>