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

标签：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
});

队列

1. 动画连缀的时候 动画默认自动加入队列

2. 可以直接使用show hide toggle

3. .css设置样式 不属于动画 不会进入动画队列 跟随第一个动画再开始的一瞬间执行完成

4. 手动添加队列

   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);
    }
})

原理

<button>请求数据</button>
<script src="../day21/jquery-3.6.0.js"></script>

<script>
  /* 
      同源: 同服务器+同端口号
      同源策略
      跨域: js对于同源策略的限制
      跨域:
          不同服务器  tmall  jd
          同一个服务器 不同端口  5500  8080
          同一服务器 不同协议  http https file
      报错: 
          has been blocked by CORS policy
      jsonp: json with padding

      原理: 动态的向页面中添加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 = $(‘<script src="https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1&callback=sd"><\/script>‘);
      // 追加到页面
      $(‘body‘).append(sc);
  });
</script>
<!-- src设置成要请求数据的地址 -->
<!-- <script src="https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1&callback=sd"></script> -->

注意: 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