38 jquery的动画、AJAX、数据序列化

2021-05-29 11:02

阅读：699

标签：method llb linear 超时数据序列化服务效果需要缓存

38 jquery的动画、AJAX、数据序列化

动画

show hide toggle

show: 显示 hide: 隐藏 toggle: 有就隐藏没有就显示

show/hide/toggle(speed, easing, callback)

width + height + opacity

speed: 动画时间 ms

easing: linear swing

callback: 回调函数

// $(‘div‘).eq(0).hide(2000, ‘linear‘, function(){
//     console.log(‘结束了‘);
//     $(this).show(1000, ‘linear‘);
// });
// $(‘div‘).eq(1).hide(2000, ‘swing‘);
?
$(document).click(function(){
    $(‘div‘).eq(0).toggle(1000, ‘swing‘);
});

slide

slideDown: 显示 slideUp: 隐藏 slideToggle: 有就隐藏没有就显示

slideDown/slideUp/slideToggle(speed, easing, callback)

height

speed: 动画时间 ms

easing: linear swing

callback: 回调函数

无参数的时候有动画效果

// $(‘div‘).eq(0).slideUp(2000, ‘linear‘, function(){
//     console.log(‘结束了‘);
//     $(this).slideDown(2000);
// });
// $(‘div‘).eq(1).slideUp(2000, ‘swing‘);
$(document).click(function(){
    $(‘div‘).slideToggle(2000);
});

fade

fadeIn: 显示 fadeOut: 隐藏 fadeToggle: 有就隐藏没有就显示

fadeIn/fadeOut/fadeToggle(speed, easing, callback)

opacity

speed: 动画时间 ms

easing: linear swing

callback: 回调函数

无参数的时候有动画效果

fadeTo: 改变到某个透明度

fadeTo(speed, opacity, easing, callback)

// $(‘div‘).eq(0).fadeOut(2000, ‘linear‘, function(){
//     // console.log(‘结束了‘);
//     $(this).fadeIn(2000);
// });
// $(‘div‘).eq(1).fadeOut(2000, ‘swing‘);
?
$(document).click(function(){
    // $(‘div‘).fadeToggle(2000);
    $(‘div‘).fadeTo(2000, 0.1, ‘linear‘, function(){
        console.log(‘结束了‘); // 有几个元素执行动画 就会有几个回调函数执行
    });
});

animate

$对象.animate(params, speed, easing, callback);

params: 要改变的属性和对应的目标值 {}

常用

// $(‘div‘).eq(0).animate({
//     ‘width‘: 500,
//     height: 500,
//     margin: 100,
//     opacity: .5
// }, 3000, ‘swing‘, function(){
//     console.log(‘结束‘);
// }).animate({
//     borderWidth: 30 
// }, 3000, ‘swing‘, function(){
//     console.log(‘结束‘);
// });

jq对象.animate(params, options);

duration: 时长 ms

easing: 运动曲线 linear swing

complete: 动画执行结束后的回调函数

step: 每一步动画执行后的回调函数

queue: 是否队列, true--进入队列 false---不进入队列

$(‘div‘).eq(0).animate({
    ‘width‘: 500,
    height: 100
}, {
    duration: 3000,
    easing: ‘linear‘,
    complete: function(){
        console.log(‘结束‘);
    },
    step: function(){
        console.log($(this).width());
    },
    queue: true
}).animate({
    borderWidth: 100
},{
    duration: 1000,
    queue: false
});

队列

动画连缀的时候动画默认自动加入队列
可以直接使用show hide toggle
.css设置样式不属于动画不会进入动画队列跟随第一个动画再开始的一瞬间执行完成
手动添加队列

jq对象.queue(函数) 手动加入队列之后后续的动画不执行

/* 
    1. 动画连缀的时候  动画默认自动加入队列
*/
// $(‘div‘).eq(0).animate({
//     ‘width‘: 500
// }).animate({
//     ‘width‘: 100
// });
?
// 2. 可以直接使用show  hide  toggle
// $(‘div‘).eq(0).animate({
//     ‘width‘: ‘hide‘
// }, 2000).animate({
//     ‘width‘: ‘show‘
// }, 2000).animate({
//     width: ‘+=150‘
// });
?
// 3. .css设置样式 不属于动画 不会进入动画队列 跟随第一个动画再开始的一瞬间执行完成
// $(‘div‘).eq(0).animate({
//     width: 1000
// }).animate({
//     height: 1000
// }).css(‘background‘, ‘green‘).animate({
//     borderWidth: 100
// });
?
// 4. 手动添加队列 
// jq对象.queue(函数)  手动加入队列之后 后续的动画不执行
$(‘div‘).eq(0).animate({
    width: 1000
}).animate({
    height: 1000
}).queue(function(next){ // 形参: 是一个函数 函数调用 后续动画继续执行
    $(this).css(‘background‘, ‘green‘);
    console.log(next);
    next();
}).animate({
    borderWidth: 100
});

is

is: is(‘选择器‘) 是否符合选择器

console.log($(‘div‘).is(‘:animated‘));
$(‘div‘).animate({
    ‘width‘: 1000
}, {
    step: function () {
        console.log($(this).is(‘:animated‘));
    },
    complete: function () {
        console.log($(this).is(‘:animated‘));
    }
});
?
// 点击页面的时候 如果div没有动画  开始动画 如果有 不添加动画
$(document).click(function () {
    if ($(‘div‘).is(‘:animated‘) == false) {
        // 添加动画
        $(‘div‘).animate({
            ‘height‘: ‘toggle‘
        }, 5000);
    }
});

stop

jq对象.stop(clearQueue, toEnd);

clearQueue: 是否清除队列如果设置成true 表示清除队列设置成false 不清除队列执行下一个动画

toEnd: 是否到达结束值如果设置成true 表示一瞬间到达结束值如果设置成false 不到达结束值

$(‘button‘).eq(0).click(function () {
    // 添加动画
    $(‘div‘).animate({
        ‘height‘: ‘toggle‘
    }, 50000).animate({
        ‘width‘: 1000
    }, 20000);
});
?
/* 
    jq对象.stop(clearQueue, toEnd);
    clearQueue: 是否清除队列  如果设置成true  表示清除队列  设置成false 不清除队列 执行下一个动画
    toEnd: 是否到达结束值   如果设置成true  表示一瞬间到达结束值  如果设置成false  不到达结束值
*/
$(‘button‘).eq(1).click(function(){
    // $(‘div‘).stop(); // undefined----false undefined----false
    // $(‘div‘).stop(true, false); // 清除队列   不到达结束值
    // $(‘div‘).stop(true, true); // 清除队列   瞬间到达结束值
});

finish

jq对象.finish(); 结束所有动画并且到达目标值

$(‘button‘).eq(1).click(function(){
    $(‘div‘).finish();
});

delay

jq对象.delay(时间); ms

上一个动画结束之后等待多长时间执行下一个动画

$(‘button‘).eq(0).click(function () {
    // 添加动画
    $(‘div‘).animate({
        ‘height‘: 1000
    }, 500).delay(5000).animate({
        ‘width‘: 1000
    }, 20000);
});

AJAX

优缺点

优点:

\1. 不需要插件支持

\2. 良好的用户体验

\3. 少量的数据交互 web服务器的压力较小

\4. 减小带宽和服务器的压力

缺点:

\1. 破坏前进、后退按钮

\2. 对搜索引擎的支持不足

$.ajax

$.ajax();

url: 请求地址, 必传

data: 请求参数,

type: 请求方式, 默认值get

success: 请求成功的回调函数,

error: 请求失败的回调函数,

complete: 请求完成的回调函数,

dataType: 期望的返回数据的类型: xml\html\script\json\jsonp

cache: 是否缓存

timeout: 超时毫秒数

$.ajax({
    // url: ‘https://easy-mock.com/mock/5ac31804c0c390592291124f/take/goods#!method=get‘,
    // url: ‘a.txt‘,
    url: ‘../day21/jquery-3.6.0.min.js‘,
    // url: ‘b.json‘,
    // url: ‘c.json‘,
    success: function(res){ // 返回请求成功的数据   已经解析完成
        console.log(res);
    },
    error: function(aja){
        console.log(aja); // ajax对象
    },
    complete: function(aja){
        console.log(aja); // ajax对象
    },
    // type: ‘post‘,
    cache: true,
    // timeout: 1,
    // dataType: ‘script‘
});

$.get

$.get(url, data, callback)

// $.get(‘b.json‘, function(res){
$.get(‘c.json‘, function(res){
    console.log(res);
});

$.post

// $.post(‘b.json‘, function(res){
$.post(‘c.json‘, function(res){
    console.log(res);
});

跨域

同源: 同服务器+同端口号

同源策略

跨域: js对于同源策略的限制

跨域:

不同服务器 tmall jd

同一个服务器不同端口 5500 8080

同一服务器不同协议 http https file

报错:

has been blocked by CORS policy

jsonp: json with padding

原理: 动态的向页面中添加script标签, 将src设置成要请求的数据的地址, 利用回调函数接收返回值

function aa(res) {
    console.log(res);
}
$.ajax({
    ‘url‘: ‘https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1‘,
    ‘dataType‘: ‘jsonp‘, // 解决跨域
    ‘jsonpCallback‘: ‘aa‘, // 只能是字符串
    ‘success‘: function (res) {
        console.log(res);
    },
    ‘error‘: function (err) {
        console.log(err);
    }
})

原理


      原理: 动态的向页面中添加script标签, 将src设置成要请求的数据的地址, 利用回调函数接收返回值
  */
  var url = ‘https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1‘;
  /* 
      src
  */ 
  // 声明一个函数 来接收后台返回的数据
  function sd(res){
      console.log(1, res);
  }
  // 点击页面按钮 请求数据
  $(‘button‘).click(function(){
      // 用script标签请求数据 先创建script标签
      var sc = $(‘

注意: jsonp只支持get请求，设置post也会被变成get

数据序列化

$(‘form‘).serialize();

$(‘form‘).serializeArray();

// 有独立单个数据
var str = $(‘form‘).serialize(); // name值=value值&name值=value值
console.log(str);// 多个重复性数据 属性名都一样的时候
var arr = $(‘form‘).serializeArray(); 
console.log(arr);
console.log(JSON.stringify(arr));
/* 
    [{
        name: a,
        value: 123
    }, {
        name: b,
        value: 123456
    }]
*/

38 jquery的动画、AJAX、数据序列化

标签：method llb linear 超时数据序列化服务效果需要缓存

原文地址：https://www.cnblogs.com/xue666888/p/14742874.html

上一篇：CSS float详解

下一篇：37 jquery的链式调用原理、元素三大宽高、操作节点、事件对象、事件绑定、命名空间、事件解绑、one、合成事件、extend

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：38 jquery的动画、AJAX、数据序列化
文章链接：http://soscw.com/index.php/essay/89083.html

亲，登录后才可以留言！

38 jquery的动画、AJAX、数据序列化

38 jquery的动画、AJAX、数据序列化

动画

show hide toggle

slide

fade

animate

$对象.animate(params, speed, easing, callback);

jq对象.animate(params, options);

队列

is

stop

finish

delay

AJAX

优缺点

$.ajax

$.get

$.post

跨域

原理

数据序列化

评论

热门文章

推荐文章

最新文章

置顶文章