首页 > 其他分享> 文章详细

js day23 动画 ajax 跨域请求

2020-10-26 19:00:26 阅读：226 来源： 互联网

标签：function 动画 console 2000 day23 js ajax animate click

一, 动画

显示隐藏

show():显示

hide():隐藏

toggle():切换

参数都可以省略没有参数直接显示动画

1、动画方式 linear 但是一般这个参数我们使用时间代替

2、速度 fast swing slow

3、回调函数动画结束之后执行的函数

// 隐藏
$('button').eq(1).click(function () {

    $('div').hide(2000)

})

// 显示

$('button').eq(0).click(function () {

    $('div').show(2000)

})
// 切换

$('button').eq(2).click(function () {

    $('div').toggle(2000)

})

上滑和下滑

sildeDown():下滑

sildeUp():上滑

sildeToggle():切换

//下滑
$('button').eq(0).click(function () {

    $('div').slideDown(2000, function () {
        console.log('我是下滑');
    })

})

// 上滑
$('button').eq(1).click(function () {

    $('div').slideUp(2000, function () {
        console.log('我是上滑');
    })

})

// 切换
$('button').eq(2).click(function () {

    $('div').slideToggle(2000)

})

淡入淡出透明度

fadeIn():淡入

fadeOut():淡出

fadeToggle():切换

fadeTo():透明度发生透明度的时间，透明度的目标值

// 淡出
$('button').eq(0).click(function () {
    $('div').fadeOut(2000, function () {
        console.log(1);
    })
})

// 淡入
$('button').eq(1).click(function () {
    $('div').fadeIn(2000, function () {
        console.log(1);
    })
})

// 切换
$('button').eq(2).click(function(){
    $('div').fadeToggle(2000,function(){
        console.log(2);
    })
})

// 透明度
$('button').eq(3).click(function(){
    $('div').fadeTo(2000, .3)
})

综上所述：上面的所有的动画的效果的参数，全部可以省略，如果省略，动画直接执行，参数我们一般使用时间，回调函数以及运动效果，基本不用，最好不用。

自定义动画

jquery对象.animate(atrr,duration,callback);

atrr：元素运动的属性必有的参数

duration：属性到达目标值的时间

callback:一个动作完成之后，调用的函数

// 点击触发动画
// 多属性同时运动
 $('#box').click(function(){
     $(this).animate({
         width:500,
         height:500
     },3000,function(){
         console.log('动作完成后，调用的函数');
     })
 })

// 累加运动
$('#box').click(function () {
    setInterval(function () {
        $('#box').animate({
            width: '+=50',
        },30)
    }, 30)
})

链式运动

// 链式运动  使用回调函数实现
  $('#box').click(function(){
      $(this).animate({
          width:500,
      },2000,function(){
          $(this).animate({
              height:500
          },2000,function(){
              $(this).css('background','blue');
          })
      })
  })

// 使用animate的动画队列
$('#box').click(function () {
$(this)
    .animate({
        width: 500
    }, 2000)
    .animate({
        height: 500
    }, 2000)
    .animate({
        left: 50
    }, 2000)
})

// 缺点：样式没有办法加入动画队列
$('#box').click(function () {
$(this)
    .animate({
        width: 500
    }, 2000)
    .animate({
        height: 500
    }, 2000)
    .css('background', 'blue')
    .animate({
        left: 50
    }, 2000)
})

// 解决样式没办法加入动画队列 （使用回调函数）
$('#box').click(function () {
$(this)
    .animate({
        width: 500
    }, 2000)
    .animate({
        height: 500
    }, 2000,function(){
        $('#box').css('background', 'blue')
    })
    .animate({
        left: 50
    }, 2000)
})

animate的复杂使用

简单使用：

jquery对象.animate({运动属性}，时间，运动形式，回调函数)

复杂使用：

jquery对象.animate({运动属性}，{

duration:运动时间，

type:‘linear’，

complete:function(){ // 动画完成后调用的函数

}，

step:function(a,b){ // 动画发生过程中时时调用的函数

a:发生动画每一步完成的值

b:动画完成的百分比

}

queue：布尔值，确定效果是否在动画队列中，默认的值是true,如果是false,动画立即执行（如果别的属性有运动，会和这个属性一起运动）

})

$('#box').click(function () {

    $(this).animate({
        width: 500
    }, {
        duration: 2000, // 运动时间
        type: 'linear', // 运动形式
        complete: function () {
            console.log('动画结束后调用的回调函数');
        },
        step: function (a, b) { // 动画每一步的信息函数
            console.log(a);
            // console.log(b);
        },
        queue: true,
    })
})

// 阻止之前动画的问题
$('#box').click(function () {
    $(this).animate({
        width: 500
    }, {
        duration: 2000,
        queue: function (next) {
            $(this).css('background', 'blue');
            // 当queue作为一个方式使用的时候，可以接受一个函数，但是这个函数有一个参数
            // 必须调用这个参数，如果不调用这个参数，后面的动画队列，会不执行
            next();  // 
        }
    })
        .animate({
            height: 500
        }, {
            duration: 2000
        })
})

// 解决队列（插队）
$('#box').click(function () {
    $(this)
        .animate({
            width: 500
        }, {
            duration: 2000,
        })
        .queue(function (next) {
            $(this).css('background', 'blue');
            // 当queue作为一个方式使用的时候，可以接受一个函数，但是这个函数有一个参数
            // 必须调用这个参数，如果不调用这个参数，后面的动画队列，会不执行
            next();  // 
        })
        .animate({
            height: 500
        }, {
            duration: 2000
        })
})

停止动画

$('button').click(function(){
    $('div').stop();  //  停止当前动画，后续动画继续
    $('div').stop(true); // 停止当前动画，并阻止后续动画进行
    $('div').stop(true,true); // 当前动画立即完成，并阻止后续动画进行
    $('div').finish(); // 所有的动画全部立即完成
})

案例 - 手风琴

// 经过小图  
// 宽度由 69 变为 224  
// 小图消失 大图要显示

// li的兄弟元素发生哪些变化
// 宽度 224 变为 69  
// 大图出去，小图进来

$('.king li').mouseover(function () {
    // 小图出去 大图进来
    $(this).stop().animate({
        width: 224
    }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();

    // 找li的兄弟节点
    $(this).siblings('li').stop().animate({
        width:69
    }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();
})

二, ajax

优势：

1、不需要使用插件的支持

2、优秀的用户的体验

3、提高web程序的性能

4、减轻服务器的压力，降低服务器的带宽

缺点：

1、破坏浏览器前进，后退的正常功能

2、对搜索引擎支持不足

在jquery里面使用ajax前面必须带 $

也就是：$.ajax({})

$.ajax({
    url: './data/banner1.json', // 数据的请求路径 
    type: 'get', // 请求方式  默认的方式就是get 
    dataType:'json', // 请求的数据类型  json text xml 如果是jsonp 跨域
    data:'a=1&b=2', // 发送给后台的数据
    timeout:5000,// 超时 超过这个时间 报错 
    cache:false, // 是否缓存  如果是get请求地址不变，走缓存 
    success: function (data) {  // 数据请求成功执行的函数
        console.log(data);
    },
    error: function (e) { // 数据请求错误执行的函数
        console.log(e);
    },
    complete:function(){ // 无论请求成功或者不成功 都走这个函数
        console.log('我也不知道 成功还是不成功');
    }
})

// 总结：
// 1、只有一个参数 但是这个参数是以对象的形式存在的 
// 2、对象实以key/value值的方式存在的

get和post请求

$.get({
    url: './data/banner.json', // 数据的请求路径 
    data:'a=1&b=2', // 发送给后台的数据
    success: function (data) {  // 数据请求成功执行的函数
        console.log(data);
    },
    error: function (e) { // 数据请求错误执行的函数
        console.log(e);
    }
})

$.post({
    url: './data/register.json', // 数据的请求路径 
    type:'post',
    data:'a=1&b=2', // 发送给后台的数据
    success: function (data) {  // 数据请求成功执行的函数
        console.log(data);
    },
    error: function (e) { // 数据请求错误执行的函数
        console.log(e);
    }
})

get和post请求的区别

1、发送数据的区别 get的数据是以url后面的形式发送 post作为http实体内容发送的

2、get方式存储大小2kb,post存储大小要比get大很多，理论上没有上限

3、安全角度使用get的时候，用户名和密码会在地址栏里面显示，post加密处理

4、传递数据的方式不一样，如果是get，在后台传送数据 _GET(),如果是post，以_POST(),但是两种方式都可以以_request[]方式获取

跨域问题

什么是跨域？

所谓的跨域其实就是浏览器对javascript的同源策略问题

比如：a.cn和b.cn 这两个网站之间的js不能互相访问因为协议、域名、端口号全部不相同

同域

简单理解协议、域名、端口号全部相同

// 原生 跨域
var url = 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1';
function showData(data){
    console.log(data);
}
var head = document.getElementsByTagName('head')[0];
// 创建一个script上标签
var script = document.createElement('script');
script.src = url + '&callback=showData';

head.appendChild(script);

jquery跨域

// jquery跨域
$.ajax({
    url: 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1',
    dataType:'jsonp', // 属性值为jsonp，就可以跨域
    success: function (data) {
        console.log(data);
    }
})

注意：如果后台服务器这是的是get方式，是可以跨域的，如果后台的服务器设置是post方式，即使有跨域的方式，也不可能会跨域，也就是，能不能跨域，在于后台设置方式是get还是post.

数据串边化

就是把用户填写的数据，进行序列化，转成后台需要的格式数据

表单 form.serialize() 
  'a=1&b=2&c=3'
表单 form.serializeArray() 
  [
      {
          name:'a',value:'1'
      }
      {
          name:'b',value:'2'
      }
      {
          name:'c',value:'3'
      }
  ]

标签：function,动画,console,2000,day23,js,ajax,animate,click
来源： https://www.cnblogs.com/bnzw/p/13880221.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9