day31JQ动画及相关内容

 

昨天内容回顾

jQuery的入门

选择器(eq first last odd even)

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

属性操作(prop reomoveProp attr removeAttr addClass removeClass hasClass toggleClass)

显示内容(text html val)

元素操作(append appendTo prevend prevedTo before inserBefore after inserAter repalceAl

replaceWith remove emtypy)

事件操作(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());

innerHei和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)
})
})

淡入fadeln淡出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添加操作 post添加操作 put做修改操作(修改多个) patch做修改操作(根据id修改一个)

JQuery中的ajax的钩子函数

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

 

面试问题:

asyn  await

解决跨域

cookie localstorage