jQuery动画和AJAX基础知识
文章目录
-
-
-
- 一、jQuery的显示和隐藏（动画效果）
- 二、jQuery动画效果
- 三、AJAX
-
-
一、jQuery的显示和隐藏（动画效果）
https://www.w3school.com.cn/jquery/jquery_ref_effects.asp
1、show()、hide()、toggle():
| 方法 | 描述 |
|---|---|
| show() | 显示被选的元素 |
| hide() | 隐藏被选的元素 |
| toggle() | 对被选元素进行隐藏和显示的切换 |
<head>
<meta charset="UTF-8">
<title>JQuery的显示和隐藏title>
head>
<body>
<div class="box">contentdiv>
<button id="btnShow">显示button>
<button id="btnHide">隐藏button>
<button id="btnToggle">切换button>
body>
<script>
$('#btnShow').bind('click',function () {
$('.box').show('slow',showCallback);
})
function showCallback(){
alert('显示完毕！');
}
$('#btnHide').bind('click',function () {
$('.box').hide(1500,function () {
alert('隐藏完毕！');
});
})
$('#btnToggle').bind('click',function () {
$('.box').toggle();
})
script>
2、fadeIn()、fadeOut():
| 方法 | 描述 |
|---|---|
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() | 逐渐改变被选元素的不透明度，从可见到隐藏 |
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(1000);
});
$(".btn2").click(function(){
$("p").fadeIn(1000);
});
});
script>
head>
<body>
<p>This is a paragraph.p>
<button class="btn1">Hidebutton>
<button class="btn2">Showbutton>
body>
3、slideDown()、slideUp()、slideToggle():
| 方法 | 描述 |
|---|---|
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideToggle(1000);
});
});
script>
head>
<body>
<p>This is a paragraph.p>
<button class="btn1">Togglebutton>
body>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp(1000);
});
$(".btn2").click(function(){
$("p").slideDown(1000);
});
});
script>
head>
<body>
<p>This is a paragraph.p>
<button class="btn1">Hidebutton>
<button class="btn2">Showbutton>
body>
二、jQuery动画效果
1、animate()方法
https://www.w3school.com.cn/jquery/jquery_animate.asp
1）语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
2）应用举例：
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
script>
head>
<body>
<button>开始动画button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
div>
body>
2、jQuery停止动画stop()
https://www.w3school.com.cn/jquery/jquery_stop.asp
1）语法：
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
2）应用举例：
如何使用stop()：
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
style>
head>
<body>
<button id="stop">停止滑动button>
<div id="flip">点击这里，向下滑动面板div>
<div id="panel">Hello world!div>
body>
如何停止动画队列：
停止被选元素的所有加入队列的动画
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").stop(true);
});
});
</script>
<p><button id="start">Start Animationbutton><button id="stop">Stop Animationbutton>p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
div>
body>
如何在动画完成后停止动画队列：
停止被选元素的所有加入队列的动画，但允许完成当前动画
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").stop(true,true);
});
});
script>
<body>
<p><button id="start">Start Animationbutton><button id="stop">Stop Animationbutton>p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
div>
body>
3、jQuery动作/方法链接Chaining
https://www.w3school.com.cn/jquery/jquery_chaining.asp
1）简单介绍：
直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。
2）应用举例：
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});
});
script>
head>
<body>
<p id="p1">jQuery 乐趣十足！p>
<button>点击这里button>
body>
三、AJAX
1、AJAX简介
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。其中，XML已被json取代。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
那么什么是异步呢？
同步：是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作。
异步：是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。在程序中异步处理的结果通常使用回调函数来处理结果。
同步处理就不一样了，说话后在吃饭，吃完饭后在看手机，必须等待上一件事完了，才执行后面的事情
比方说一个人边吃饭，边看手机，边说话，就是异步处理的方式。
form 通过一个submit 发起一个 request请求（post/get ）， 如果验证用户名是否已存在， 使用异步的用户体验度更高。
2、语法
$.ajax({
type:'get',
dataType:'json',
url://地址
data://数据
success:function(){
//如果成功，执行的函数
}
})
3、应用举例
<head>
<meta charset="UTF-8">
<title>登录页面title>
head>
<body>
<input id="username"/>
<input id="password"/>
<button id="btnLogin">登录button>
body>
$(document).ready(function () {
$('#btnLogin').bind('click',btnLoginClick);
})
function btnLoginClick() {
$.ajax({
url:'../../ajax/Day1/user.json',
type:'get',
dataType:'json',
data:{
username: $('#username').val(),
password: $('#password').val()
},
success:function (data) {
var username = $('#username').val();
var password = $('#password').val();
if(username==data.username&&password==data.password){
alert('登录成功');
}else{
alert('用户名或密码不正确');
}
}
})
}
{
"username":"admin",
"password": "123456"
}
4、线上json数组格式校验工具
http://www.bejson.com
https://www.json.cn