jQuery中的动画与ajax的应用

2022-07-24 21:43:09

1、jQuery中的动画

1、显示与隐藏

jQuery对象.show(speed, easing, callback); 显示

jQuery对象.hide(speed, easing, callback); 隐藏

jQuery对象.toggle(speed, easing, callback); 开关效果。如果显示，就隐藏; 如果隐藏，就显示

参数：

speed：时间
- number(单位是毫秒) ‘fast‘(200ms) ‘normal‘(400ms) ‘slow‘(600ms)
- 时间参数不写，默认为0
easing: 运动的形式
- "swing" - 慢快慢 "linear" - 匀速
callback: 回调

<button>show</button>
<button>hide</button>
<button>toggle</button>
<div id="box"></div>

var btn = $(‘button‘);
var box = $(‘#box‘);
// 通常的用法，是不加参数，代替我们css的显示和隐藏
?
// 显示
btn.eq(0).click(function () {
    box.show(3000, function () {
        console.log(‘我显示了‘);
    });
});
?
// 隐藏
btn.eq(1).click(function () {
    box.hide(3000, function () {
        console.log(‘我隐藏了‘);
    });
});
?
// 切换
btn.eq(2).click(function () {
    box.toggle();
});

2、透明度的改变

jQuery对象.fadeIn(speed, easing, callback) 显示

jQuery对象.fadeOut(speed, easing, callback) 隐藏

jQuery对象.fadeTo(speed, 透明度, easing, callback) 透明到多少

jQuery对象.fadeToggle(speed, easing, callback) 如果显示的，则隐藏，如果是隐藏的，则显示

注意：如果不写时间参数，时间默认是400ms

<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeTo</button>
<button>fadeToggle</button>
<div id="box"></div>

var btn = $(‘button‘);
var box = $(‘#box‘);
?
// 显示
btn.eq(0).click(function () {
    box.fadeIn(3000, ‘linear‘, function () {
        console.log(‘我显示了‘);
    });
});
?
// 隐藏
btn.eq(1).click(function () {
    box.fadeOut(3000, ‘linear‘, function () {
        console.log(‘我隐藏了‘);
    });
});
?
// 透明到多少
btn.eq(2).click(function () {
    box.fadeTo(3000, 0.5, ‘linear‘, function () {
        console.log(‘我透明到0.5了‘);
    });
});
?
// 切换
btn.eq(3).click(function () {
    box.fadeToggle(3000, ‘linear‘, function () {
        console.log(‘我切换了‘);
    });
});

3、高度的改变

jQuery对象.slideDown(speed, easing, callback); 显示

jQuery对象.slideUp(speed, easing, callback); 隐藏

jQuery对象.slideToggle(speed, easing, callback); 如果是显示的，则隐藏，如果是隐藏的，则显示

注意：如果不写时间参数，时间默认是400ms

<button>slideDown</button>
<button>slideUp</button>
<button>slideToggle</button>
<div id="box"></div>

// 显示
btn.eq(0).click(function () {
    box.slideDown(3000);
});
?
// 隐藏
btn.eq(1).click(function () {
    box.slideUp(3000);
});
?
// 切换
btn.eq(2).click(function () {
    box.slideToggle();
});

4、自定义动画animate

jQuery对象.animate({动画的参数}, 时间, 运动形式, 回调);

第一个参数 : 运动的值和属性 {width: 300, height: 300}

第二个参数 : 时间(运动的快慢) 默认 : 400ms

第三个参数 : 运动形式，两种运动形式( 默认 : swing(慢快慢) linear(匀速) )

第四个参数 : 回调函数(回调中的this是运动的这个元素)

var box = $(‘#box‘);
?
// 基本运动
box.click(function () {
    box.animate({
        width: 500
    }, 3000, ‘linear‘, function () {
        console.log(‘我运动完成了‘);
    });
});
?
// ---------------------------------------------
?
// 同时运动多个值
box.click(function () {
    box.animate({
        width: 500,
        height: 500,
        left: 300,
        top: 300,
        opacity: 0.3
    }, 3000, ‘linear‘, function () {
        console.log(‘我运动完成了‘);
    });
});
?
// ---------------------------------------------
?
// 累加、累减动画，在原来的基础上加减
box.click(function () {
    box.animate({
        left: ‘+=50‘
    });
});
?
// ---------------------------------------------
?
// 链式运动
box.click(function () {
    box
        .animate({ width: 500 }, 3000)
        .animate({ height: 500 }, 3000)
        .animate({ left: 500 }, 3000)
        .animate({ top: 500 }, 3000);
});
?
// ---------------------------------------------
?
// 动画队列
// 需求：元素宽运动到了500后，再把元素背景变成黄色。
// 但是如下这样写达不到效果，而是一开始背景就变成黄色了，因为css()并不会加入动画队列中，而是会立即执行。
box.click(function () {
    box
        .animate({ width: 500 }, 3000)
        .css(‘background‘, ‘yellow‘);
});
?
// 解决方式一：回调（简单，但是如果多次回调，会产生回调地狱）
box.click(function () {
    box.animate({
        width: 500
    }, 3000, function () {
        $(this).css(‘background‘, ‘yellow‘);
    })
});
?
// 需求：元素宽运动到了500后，再把元素背景变成黄色。再高运动到500
// 解决方式二：queue()，它接收一个函数做为参数，可以将这个函数参数添到动画队列。这个函数有一个参数next，我们需要调用它，才能继续执行后续的运动队列
box.click(function () {
    box
        .animate({ width: 500 }, 3000)
        .queue(function (next) {
            $(this).css(‘background‘, ‘yellow‘);
            next();
        })
        .animate({ height: 500 }, 3000);
});

5、是否处于动画状态

jquery对象.is(‘:animated‘) 返回真假，真为正在运动，假为没有运动

<button>按钮</button>
<div id="box"></div>

$(‘#box‘).click(function () {
    $(this).animate({
        width: 500
    }, 5000)
})
?
// jQuery对象.is(‘:animated‘);  这个元素是否在做运动
$(‘button‘).click(function () {
    // 判断box是否在运动
    console.log($(‘#box‘).is(‘:animated‘));
});

6、延迟运动

在动画执行的过程中，如果想对动画进行延迟操作，那么可以使用delay()方法。

jQuery对象.delay(时间);

// jQuery对象.delay(时间);
$(‘#box‘).click(function () {
    $(this)
        .animate({ width: 500 }, 3000)
        .delay(3000) // 延迟3秒再做下一步运动
        .animate({ height: 500 }, 3000)
        .animate({ left: 500 }, 3000)
});

7、停止运动

stop

jQuery对象.stop(clearQueue, gotoEnd);

clearQueue：代表是否要清空末执行完的动画队列，默认false。

gotoEnd：代表是否直接将正在执行的动画跳转到末状态，默认false。

finish

jQuery对象.finish(); // 所有运动立即到终点

<button>停止</button>
<div id="box"></div>

var btn = $(‘button‘);
var box = $(‘#box‘);
?
box.click(function () {
    $(this)
        .animate({ width: 500 }, 3000)
        .animate({ height: 500 }, 3000);
});
?
// jQuery对象.stop(clearQueue, gotoEnd);
//      clearQueue：代表是否要清空未执行完的动画队列，默认false。
//      gotoEnd：代表是否直接将正在执行的动画跳转到末状态，默认false。
// jQuery对象.finish(); // 所有运动立即到终点
?
// 停止
btn.click(function () {
    // box.stop(); // 停止当前，后续的继续
    // box.stop(false, true); // 当前立即到终点，后续的继续
    // box.stop(true, false); // 停止当前，停止后续
    // box.stop(true, true); // 停止当前，停止后续
?
    box.finish(); // 所有立即到终点
});

2、ajax的应用

1、ajax优势与不足

优势：

1、不需要插件支持

2、优秀的用户体验

3、提高web程序的性能

4、减轻服务器和带宽的负担

不足：

破坏浏览器前进、后退按钮的正常功能

对搜索引擎的支持不足

2、$.ajax({参数})

是jquery的ajax请求最底层的方法

$.ajax({
    url: ‘./data/networkClass.json‘, // 请求的地址
    cache: false, // 是否缓存。get请求时，如果url地址和上次没有发生变化，则会走缓存，为了不走缓存，jQuery在地址的后面加了_=时间戳
    type: ‘get‘, // 请求的方式，get/post 默认get
    timeout: 5000, // 设置超时时间 时间ms
    data: ‘a=1&b=2‘, // 发送到后端的数据
    // dataType: ‘‘, // 期待后端返回的数据类型，xml, html, script, json, jsonp, text
    success: function (data) { // 成功的回调
        console.log(data);
    },
    error: function (e) { // 失败的回调
        console.log(e);
    },
    complete: function () { // 不论成功失败，都会走这里
        console.log(‘执行到我了‘);
    }
})

3、$.get()

它是建立在$.ajax之上的一个请求

格式：$.get(url, 发到后端的数据, 成功的回调); 没有数据，可以不写，发送get请求

// 不带参数
$.get(‘./data/networkClass.json‘, function (data) {
    console.log(data);
})
?
// 带参数
$.get(‘./data/networkClass.json‘, ‘a=1&b=2‘, function (data) {
    console.log(data);
})

4、$.post()

格式：$.post(url, 发送到后端的数据, 回调); 没有数据，可以不写，发送post请求

// 不带参数
$.post(‘./data/networkClass.json‘, function (data) {
    console.log(data);
})
?
// 带参数
$.post(‘./data/networkClass.json‘, ‘a=1&b=2‘, function (data) {
    console.log(data);
})

5、get请求和post请求的区别

1、get请求会将参数跟在URL后进行传递，而post请求则是作为HTTP消息的实体内容发送给WEB服务器。当然，在ajax请求中，这种区别对用户是不可见的。

2、get请求方式对传输的数据有大小限制（通常不能大于2KB），而使用post方式传递的数据量要比get方式大得多（理论上不受限制）。

3、get方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，get方式会带来严重的安全性问题，而post方式相对来说可以避免这些问题。

4、get方式和post方式传递的数据在服务器端获取也不相同。在php中，get方式的数据可以用$GET[]获取，而post方式可以用$POST[]获取。两种方式都可以用$_REQUEST[]来获取。

6、jQuery中的jsonp

跨域：域名、端口、协议任何一项不同，即为跨域

浏览器对于JavaScript的同源策略的限制：例如a.cn下面的js不能调用b.cn中的js。因为a.cn和b.cn是不同域，所以跨域就出现了。

jsonp是jQuery中的跨域处理

jquery中的jsonp，不是ajax，只不过它和ajax都集中在$.ajax里面

var url = ‘https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1‘;
$.ajax({
    url: url,
    dataType: ‘jsonp‘, // 解决跨域
    success: function (data) {
        console.log(data);
    },
    error: function (e) {
        console.log(e);
    }
});

7、jsonp的原理

首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的。
那么如何使用<script src="">来完成一个跨域请求
当创建并添加一个<script src="xxx&callback=aaa">标签，用于发起跨域请求；注意看请求地址后面带了一个callback=aaa的参数；
aaa即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是aaa(data)的形式，因为是script脚本，所以自动调用全局的aaa函数，而data就是aaa的参数。
至此，我们算是跨域把数据请求回来了，但是比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便。

注意：

可以看到，jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了。

jQuery的ajax方式以jsonp类型发起跨域请求，其原理跟<script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。

8、数据串连化

form表单.serialize() 串连成一个字符串

form表单.serializeArray() 串连成一个数组

作用：可以将 form中的数据，串连起来，不用一个一个去获取

<form>
    <input type="text" name="a" value="1">
    <input type="text" name="b" value="2">
    <input type="text" name="c" value="3">
</form>
<button>按钮</button>

$(‘button‘).click(function () {
    console.log($(‘form‘).serialize()); // a=1&b=2&c=3
    console.log($(‘form‘).serializeArray()); // [{ name: "a", value: "1" }, { name: "b", value: "2" }]
});