jQuery(2)

最新推荐文章于 2024-07-12 16:27:40 发布

hw2948502143

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量754

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/hw2948502143/article/details/124304958

版权

jQuery(2)

jQuery的动画

显示隐藏

除了改变透明度还改变宽高

// show hide 改变的是display:none 写透明度没有什么作用

show(针对隐藏的元素) 显示

hide(针对显示的元素) 隐藏

// show 参数1为执行事件 参数2为回调函数 
$('img').show(2000,function(){
    console.log('执行了show');
    setTimeout(() => {
        // hide 参数1为执行事件 参数2为回调函数 
        $(this).hide(2000,function(){
            console.log('执行了hide');
        })
    }, 2000);
})

toggle切换方法如果是显示的就隐藏如果是隐藏的就显示

<body>
    <!-- jQuery封装了很多的动画方法 -->
    <div></div>
</body>
<script>
    // toggle(切换方法)如果是显示就淡出 如果是隐藏就淡入 参数1为时间 参数2为速度类型(swing缓冲,linear匀速) 参数3回调函数
    $('div').toggle(1000,function(){
        console.log('执行了show')
        setTimeout(() => {
            $(this).toggle(1000,function(){
                console.log('执行了hide');
            })
        }, 5000);
    })
</script>

fadeIn淡入 fadeOut淡出

$('div').fadeIn(1000,function(){
    console.log('in')
    setTimeout(() => {
        $(this).fadeOut(1000,function(){
            console.log('out');
        })
    }, 2000);
})

animate动画

// div从左移动到 宽高变成300 移动完在移动回来
// 注意：所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能
// 第1个参数为obj 就是需要变化的内容 第2个参数为执行的时间 第3个参数为回调方法
$('div').animate({'width':300,'height':300,'left':300},2000,function(){
    console.log('执行了animate');
    $(this).animate({left:0},2000)
})

stop停止动画

// div从左移动到 宽高变成300 移动完在移动回来
        // 注意：所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能
        // 第1个参数为obj 就是需要变化的内容 第2个参数为执行的时间 第3个参数为回调方法
        $('div').animate({'width':300,'height':300,'left':300},2000,function(){
            console.log('执行了animate');
            $(this).animate({left:0},2000)
        })
        $('button').eq(0).click(function(){
            $('div').stop()
        })

finish动画最终效果

 // div从左移动到 宽高变成300 移动完在移动回来
        // 注意：所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能
        // 第1个参数为obj 就是需要变化的内容 第2个参数为执行的时间 第3个参数为回调方法
        $('div').animate({'width':300,'height':300,'left':300},2000,function(){
    console.log('执行了animate');
    $(this).animate({left:0},2000)
})
$('button').eq(1).click(function(){
	$('div').finish()
})

jQuery的get方法及post方法

$.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:function(){//这个请求结束的回调
        console.log('结束了');
    }
})

ajax的相关操作

// 第一个url地址(不能省略) 第二个参数是对象的形式传输的 第三个回调方法 得到数据
$.get('https://jsonplaceholder.typicode.com/todos',{id:1},function(res){
	console.log(res);
})
// 第一个url地址(不能省略) 第二个参数是对象的形式传输的 第三个回调方法 得到数据
$.post('http://useker.cn/login',{uname:'abc',upwd:'123'},function(res){
	console.log(res);	
})

$.getJSON 获取JSON格式数据

$.getJSON('https://jsonplaceholder.typicode.com/todos',function(res){
    console.log(res);
})
$.getJSON('./user.json',function(res){
    console.log(res);
})

jQuery的扩展

如果jQuery没有我们想要的方法，我们可以自己加进去

$.extend

参数是一个对象

$.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).animate({'left':left},3000)
}
})
$('div').check()
$('div').move(1100)

hw2948502143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery(2)

jQuery(2)jQuery的动画显示隐藏除了改变透明度还改变宽高// show hide 改变的是display:none 写透明度没有什么作用show(针对隐藏的元素) 显示hide(针对显示的元素) 隐藏// show 参数1为执行事件参数2为回调函数 $('img').show(2000,function(){ console.log('执行了show'); setTimeout(() => { // hide 参数1为执行事件参数2为回
复制链接

扫一扫