一, 动画

显示隐藏

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'
      }
  ]