文章目录
jQuery(2)
jquery的动画(封装了许多的动画方法)
淡入淡出
fadeIn 淡入(display:none)
// 淡入淡出 只改透明度
// fadeIn 淡入(把隐藏变成显示) fadeOut 淡出(把显示的内容隐藏)
$('img').fadeIn(2000,function(){
})
fadeOut 淡出
$('img').fadeOut(2000,function(){
console.log('成功');
})
显示隐藏
show(针对隐藏的元素 display:none)
//show 参数1为执行时间 回调函数
$('img').show(2000,'linear',function(){
console.log('执行完成');
})
hide (针对显示的元素)
//隐藏
$(img).hide(2000,'swing',function(){
console.log('hello world');
})
toggle (切换方法) 如果是显示就隐藏 如果是隐藏就显示
//toggle方法 参数1为执行时间 回调函数 第二个参数为速度 如果是显示就隐藏
$('img').toggle(2000,'linear',function(){
console.log('执行完成');
setTimeout(()=>{
//如果是隐藏就显示
$(this).toggle(2000,'swing',function(){
console.log('hello world');
})
},2000)
})
动画方法(相当于我们之前封装animated.js)
animate
所有用于动画的属性必须是数字的,除非另有说明;这些属性如果不是数字的将不能使用基本的jQuery功能
//div从左移到右 宽高变成300 移动完再移动回来
// 第一个参数为object 需要变化的内容 第二个参数为执行的时间 第三个参数为回调的方法
$('div').animate({'width':300,'height':300,'left':300},2000,'swing',function(){
console.log('执行成功');
$(this).animate({left:0},2000)
})
stop
//停止动画
$('div').stop()
finish
//终止动画 达到动画结束状态
$('div').finish()
jquery的ajax
get
//url地址 params参数 回调方法
//第一个url地址(不能省略) 第二个为参数是对象的形式传输的(可省略) 第三个回调方法 得到数据
$.get('https://jsonplaceholder.typicode.com/todos',{id:1},function(res){
console.log(res);
})
post
//url地址 params参数 回调方法
//第一个url地址(不能省略) 第二个为参数是对象的形式传输的(可省略) 第三个回调方法 得到数据
//https://jsonplaceholder.typicode.com/todos 这个接口是一个rest接口 rest规范里面post做的是添加操作
$.post('http://useker.cn/login',{uname:'abc',upwd:'123'},function(res){
console.log(res);
})
Ajax
//类似于我们封装的ajax方法 里面需要传入一个对象
$.ajax({
url:'https://jsonplaceholder.typicode.com/todos',//请求地址
type:'GET',//请求方式
data:{id:2},//携带数据
dataType:'JSON',//数据类型
async:true,//是否异步 默认为true
success:function(res){//成功的回调
console.log(res);
},
error:function(err){//失败的回调
console.log(err);
},
complete(){ //这个是请求结束的回调
console.log('结束了');
}
})
getJson方法
// $.getJSON() //获取JSON格式数据
$.getJSON('https://jsonplaceholder.typicode.com/todos',function(res){
console.log(res);
})
Ajax的全局函数
//全局的钩子函数
$(window).ajaxStart(function(){
console.log('ajax开始发送');
})
$(window).ajaxSend(function(){
console.log('ajax请求发送');
})
$(window).ajaxStop(function(){
console.log('ajax请求停止');
})
$(window).ajaxSuccess(function(){
console.log('ajax发送成功');
})
$(window).ajaxError(function(){
console.log('ajax请求失败');
})
$(window).ajaxComplete(function(){
console.log('ajax请求完成');
})
Jquery的jsonp请求
//jquery发送jsonp请求
$.ajax(
{
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data:{wd:'游戏'},
dataType:'jsonp',//指定为jsonp返回
jsonp:'cb',//他要接收的函数的键
jsonpCallback:'fn', //回调函数名字
success(res){
console.log(res);
},
timeout:1000 //超时时间
}
)
Jquery的多库共存
jquery里面是不是我们使用的最多的是$
有一天我们导入了另外一个库(这个库也是使用$来调用)
jquery给我们提供了一个方法 来帮助我们禁用这个$
//利用jquery的方法来禁用$
// $.noConflict()
//当上面的方法调用完 对应$就不能再使用了
// console.log($('div'));
//同时禁用$ 以及 jquery
// $.noConflict(true) //是否全部禁用
// console.log(jQuery('div'));
let sos = $.noConflict(true) //这个sos就替代了jQuery以及$
console.log(sos('div'));
Jquery的扩展
现在我们自己想实现一个功能而jquery没有对应的方法 这个时候我们可以再jquery的上面扩展一个方法
$.extend(obj)
//我想在jquery上面扩展俩个方法 一个叫min 一个叫max
//使用jquery对象来继承一个对象 那么对应的jquery就拥有了这个对象的方法
$.extend({max:function(...arg){
let maxIndex = 0
arg.forEach((v,index) => {
if(arg[maxIndex]<v){
maxIndex = index
}
});
return arg[maxIndex]
}
})
$.extend({min:function(...arg){
let minIndex = 0
arg.forEach((v,index) => {
if(arg[minIndex]>v){
minIndex = index
}
});
return arg[minIndex]
}
})
console.log($.max(1,2,3));
console.log($.min(1,2,3));
扩展给对应的原型 $.fn.extend(对象)
//扩展给原型
$.fn.extend({
check:function(){
console.log('hello');
},
move:function(left){
$(this).css('position',"absolute")
// $(this).css('left',left)
$(this).animate({'left':left},300)
}
})
$('div').check()
$('div').move(150)