jQuery(2)

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)