今天要说的就是jQuery的动画相关操作以及对ajax的操作。
目录
一、基本动画事件
jQuery提供的基本动画有三个：show()--显示、hide()--隐藏、toggle()--切换。
对于以上三个函数，他们都有共同的参数：
1、运动时间：ms为单位。
2、运动曲线：linear--匀速，swing--开头结尾慢，中间快。
3、运动结束的回调函数：也就是动画执行结束后要执行的操作。
咱们通过一个例子来演示相关代码：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
<!--三个按钮，一个div块-->
<button>show</button>
<button>hide</button>
<button>toggle</button>
<div></div>接下来写JS代码：
$("button:nth-child(1)").click(function () {
//执行show动画
$("div").show(1000, "linear", function () {
console.log("show动画执行完毕");
});
});
$("button:nth-child(2)").click(function () {
// 执行hide动画
$("div").hide(1000, "swing", function () {
console.log("hide动画执行完毕");
});
});
$("button:nth-child(3)").click(function () {
// 执行toggle动画
$("div").toggle(1000, "linear", function () {
console.log("toggle动画执行完毕");
});
});当点击按钮的时候，你就会发现，这个蓝色的div块是以左上角为动画的起始点和结束点的。这就是这三给基本动画的操作。
二、折叠动画事件
和基本动画一样，折叠动画也有三个，分别是：slideDown()--显示、slideUp()--隐藏、slideToggle()--切换。
对于上面三个函数，也有共同的参数：
1、运动时间：以ms为单位。
2、运动曲线：linear--匀速、swing--开始结束慢，中间快。
3、运动结束的回调函数：即动画结束时要执行的操作。
简单的例子，HTML代码还是和上面一样，除了按钮的名字需要改一下。这里就不重复写了，咱直接上JS代码：
$("button:nth-child(1)").click(function () {
//执行slideDown动画
$("div").slideDown(1000, "linear", function () {
console.log("slideDown动画执行完毕");
});
});
$("button:nth-child(2)").click(function () {
// 执行slideUp动画
$("div").slideUp(1000, "swing", function () {
console.log("slideUp动画执行完毕");
});
});
$("button:nth-child(3)").click(function () {
// 执行slideToggle动画
$("div").slideToggle(1000, "linear", function () {
console.log("slideToggle动画执行完毕");
});
});通过执行上面的代码发现，slide系列动画的起始点和结束点都是以上边框为准的。
三、渐隐渐显动画事件
渐隐渐显动画，本质就是控制元素的透明度。总共有四个函数，分别是：fadeIn()--渐显、fadeOut--渐隐、fadeToggle()--渐隐渐显、fadeTo()--变化到指定透明度。
其中，除了fadeTo()函数外，其余的三个都是和之前的一样，只有三个参数：
1、运动时间：以ms为单位。
2、运动曲线：linear--匀速、swing--开始结束慢，中间快。
3、运动结束的回调函数：即动画结束时要执行的操作。
而fadeTo()函数，多了一个参数2：
1、运动时间：以ms为单位。
2、指定透明度：范围为0-1。
2、运动曲线：linear--匀速、swing--开始结束慢，中间快。
3、运动结束的回调函数：即动画结束时要执行的操作。
在最开始的HTML代码中加上一个按钮，然后更改一下各按钮的名字就是接下来需要的HTML代码。这里也不重复写了，直接上JS：
$("button:nth-child(1)").click(function () {
//执行fadeIn动画
$("div").fadeIn(1000, "linear", function () {
console.log("fadeIn动画执行完毕");
});
});
$("button:nth-child(2)").click(function () {
//执行fadeOut动画
$("div").fadeOut(1000, "linear", function () {
console.log("fadeOUt动画执行完毕");
});
});
$("button:nth-child(3)").click(function () {
//执行fadeToggle动画
$("div").fadeToggle(1000, "linear", function () {
console.log("fadeToggle动画执行完毕");
});
});
$("button:nth-child(4)").click(function () {
//执行fadeTo动画
$("div").fadeTo(1000, 0.5, "linear", function () {
console.log("fadeTo动画执行完毕");
});
});然后渐隐渐显的效果就实现啦~
四、综合动画事件
你以为jQuery只提供了上面这么一点动画事件？那你也太小瞧它了。jQuery还为我们专门提供了一个综合动画事件，叫做：animate()。
animate和CSS中的animation动画属性其实差不多，但是我个人认为animation比jQuery提供的animate要更加强大一点，原因是因为：
1、animate中不能颜色相关的样式不能运动，但是animation可以；
2、关于transform相关的样式在animate中不能设置，但是animation可以；
来个例子：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background-color: skyblue;
position: absolute;
}
</style>
<button>animate</button>
<div></div> $("button").click(function () {
$("div").animate(
{
width: 600,
height: 600,
left: 300,
top: 200,
borderRadius: "50%",
},
1000,
"linear",
function () {
console.log("animate动画结束了");
}
);
});上面的JS代码没有用animate设置颜色和transform相关的动画，各位读者可以自己去试一试，看看能不能成功。
五、运动结束动画函数
在jQuery中，还提供了两个运动结束动画：stop()、finish()。
在解释什么是运动结束动画函数之前，先来做一个小测试：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<button>开始动画</button>
<div></div> $("button").click(function () {
// 开始一个动画，简单的使用一个toggle
$("div").toggle(2000, "linear", function () {
console.log("动画执行完毕");
});
});在写完上面的代码之后，运行网页，然后不停的点击“开始动画”按钮，你觉得他会执行几次？你会惊奇的发现，当你停止按按钮之后，动画还在不停的执行，直到达到你点击的次数为止。也就是说，你点了多少次，动画就会运动多少次，但我们有时候并不想这样，所有这时候就需要使用运动结束动画函数。
1、stop()：当任何一个元素执行了stop()之后，会立即结束当前所有运动，目前运动到什么位置，就停留在什么位置。一般对于此结束动画函数的使用都是在运动开始之前。
2、finish()：当任何一个元素执行了finish方法以后，会立即结束当前所有的运动，直接去到动画的结束位置。
咱接着上面的代码写：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<button>开始动画</button>
<button>stop</button>
<button>finish</button>
<div></div>$("button:nth-child(1)").click(function () {
// 开始一个动画，简单的使用一个toggle
$("div").toggle(3000, "linear", function () {
console.log("动画执行完毕");
});
});
$("button:nth-child(2)").click(function () {
// 停止动画
$("div").stop();
});
$("button:nth-child(3)").click(function () {
// 结束动画
$("div").finish();
});请注意，我这的JS代码在使用选择器的时候加上了伪类选择器，用来选择不同的按钮，然后动画的时间变成了3s。
各位可以在动画运动的过程中，分别点击stop按钮和finish按钮来体验这两个函数的作用与区别。
当然，stop和finish可不止这样简单的使用，现在让我们最开始的例子（第五点的最开始）：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<button>开始动画</button>
<div></div>$("button:nth-child(1)").click(function () {
// 利用stop结束动画书写开始动画
// 每一次触发的时候，都会把之前的动画停止下来，只执行本次最新的动画
// $("div")
// .stop()
// .toggle(2000, "linear", function () {
// console.log("动画执行完毕");
// });
// 利用finish结束动画书写开始动画
// 每一次动画触发的时候，都会把之前的动画瞬间完成，只执行本次最新的动画
$("div")
.finish()
.toggle(2000, "linear", function () {
console.log("动画执行完毕");
});
});各位读者现在再试试，当你不停的点击“开始动画”按钮然后达到一定次数放开的时候，这个动画还会像之前那样一直运动，直到达到你点击的次数为止吗？
六、jQuery对ajax的封装
在说之前，请各位先停止自己的想当然的想法：ajax请求需要获取元素之后才能使用。这种想法是错误的！STOP！
发送ajax请求不是操作DOM结构，所以不需要依赖选择器获取到元素，它的使用，只需要一个 $ 符号或者 jQuery 就可以了。
语法：$.ajax({
//本次发送ajax的配置项
})
ajax的配置项有：
1、url：必填，发送请求的地址。
2、mehtod：选填，请求方式，默认是GET。
3、data：选填，默认是' '，表示需要传递给后端的参数。
4、async：选填，默认是true，表示是否异步请求。
5、success：选填，表示请求成功的回调函数。
6、error：选填，表示请求失败的回调函数。
直接上代码：
// get
// $.ajax({
// url: "http://xxxx/xxx",
// method: "GET",
// success: function (res) {
// console.log("请求成功");
// console.log(res);
// },
// error: function () {
// console.log("请求失败");
// },
// });
// post
$.ajax({
url: "http://xxxx/xxxx",
method: "POST",
async: true,
data: { xxx: "xxx", xxx: "xxxx" },
success: function (res) {
console.log("请求成功");
console.log(res);
},
error: function () {
console.log("请求失败");
},
});如果有使用过uni-app的朋友，就会发现和uni.request()很像，对不？没啥基础的话就不用纠结了，直接按照这个格式用就完事！
小技巧：当后端给你返回的是JSON格式的数据时，需要进行单的解析。你可以通过JSON.parse(json格式字符串)来将结果进行解析。例如：
$.ajax({
url: "http://39.107.27.157:5310/getallaccount",
method: "GET",
success: function (res) {
console.log("请求成功");
console.log(res);
//解析后端返回的json格式字符串
var data=JSON.parse(res.data)
console.log(data)
},
error: function () {
console.log("请求失败");
},
});好啦，jQuery的基本操作到这里就说的差不多了，欢迎各位大佬对这些内容进行补充或者有什么说错的地方请多多指教~
作者其他相关文章：