Day-28JQuery动画及相关内容

JQuery动画及相关内容

昨天内容回顾

jQuery的入门

选择器（eq first last odd even）

筛选器 (eq,first,last,children,parent,parents,siblings,prev,next,find...)

属性操作 （prop removeProp attr removeAttr addClass removeClass hasClass toggleClass）

显示内容 （text html val）

元素操作 （append appendTo prevend prevedTo before inserBefore after inserAfter replaceAll replaceWith remove emtpy）

事件操作 （on off click ... hover）

获取元素的位置

offset 返回的是一个对象 （left,top） 基于body

$('.box').offset() //包含margin值的
console.log( $('.innerBox').offset()); //基于body 离body的距离

position 返回的是一个对象 基于父元素

$('.box').position()  //只包含定位的
console.log( $('.innerBox').position()); //基于父元素 离父元素的距离

获取元素的尺寸

width 和 height

// 获取对应的div的尺寸 width和height
// width和height方法 不包含其他的内容只获取元素的尺寸（不包含 padding border）
console.log($('div').width());
console.log($('div').height());

innerHeiht 和 innerWidth

//innerWidth innerHeight 包含padding 不包含border
console.log($('div').innerHeight());
console.log($('div').innerWidth());

outerWidth 和 outerHeight

//outerHeight outerHeight 包含border 包含padding
console.log($('div').outerHeight());
console.log($('div').outerWidth());

动画

show 显示的动画

$('.show').click(function(){
    $('div').show(3000,function(){
        console.log('显示成功');
    }) //3秒内显示完
})

hide 隐藏的动画

$('.hide').click(function(){
    $('div').hide(3000,function(){
        console.log('隐藏成功');
    }) //3秒内显示完
})

toggle 切换（如果显示就隐藏 如果隐藏就显示）

$('.toggle').click(function(){
    $('div').toggle(3000,function(){
        console.log('切换成功');
    }) //3秒内显示完
})

stop 停止

$('.stop').click(function(){
    $('div').stop() //清除队列 跳到结束
})

finish 完成

$('.finish').click(function(){
    $('div').finish()  //完成对应的动画
})

animate （所有用于动画的属性必须是数字的）

$('.btn1').click(function(){
    //自定义动画 执行啥 执行多久 执行完干嘛
    $('div').animate({
        opacity:1,
        left:500
    },2000,function(){
        $('div').animate({
            left:100
        },500)
    })
})

淡入 fadeIn 淡出 fadeOut

$('div').fadeIn(3000,function(){
    $('div').fadeOut(3000) //淡出
}) //淡入

请求

get方法 发送get请求

$('.getBtn').click(function(){
    $.get('http://10.41.12.8:8080/shop',{id:1},function(res){
        console.log(res);
    })
})

post方法 发送post请求

//jquery的post请求 默认以表单形式提交 json格式
$('.postBtn').click(function(){
    $.post('http://10.41.12.8:8080/user',{username:'jack',password:'abc'},function(res){
        console.log(res);
    })
})

ajax 方法 发送ajax请求

// ajax 是get和post的父方法
$('.ajaxBtn').click(function(){
    $.ajax({
        url:"http://10.41.12.8:8080/user",
        type:"POST",
        //后台如果是json格式接收那么必须先要转为对应的字符串 因为他自动做的是拼接操作（get提交）
        data: JSON.stringify({username:"jack",password:"abc"}),
        contentType:"application/json; charset=UTF-8",
        dataType:"json",
        async:true,
        success:function(data){
            console.log(data);
        },
        error:function(err){
            console.log(err);
        },
        complete:function(){
            console.log('执行完成');
        }
    })
})

rest规范的接口 称为restful风格的接口

特性：1.根据对应的请求做对应的操作 2.返回的数据为json格式 3.一般的传入数据的模式不再使用? 使用/

get 查询操作 post 添加操作 delete 删除操作 put 做修改操作（修改多个） patch 做修改操作（根据id修改一个）

JQuery中的ajax的钩子函数

//默认调用 到了对应的时候 他就默认自己调用（钩子函数 用于对应的生命周期）
$().ajaxError() //ajax在发送的过程中遇到错误
$().ajaxStart() //ajax开始发送
$().ajaxSend() //ajax发送中
$().ajaxComplete() //ajax请求完成
$().ajaxStop() //ajax停止
$().ajaxSuccess() //ajax发送成功