JavaScript学习Day009(事件&动画)

放在糖果旁的是我很想回忆的甜

已于 2022-09-26 18:42:56 修改

阅读量366

点赞数 4

分类专栏： javaScript 文章标签： javascript 学习前端马力

于 2022-09-26 18:42:54 首次发布

本文链接：https://blog.csdn.net/qihaojinqiuma/article/details/127056096

版权

javaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

事件

jQuery事件是对JavaScript事件的封装，常用事件分类

基础事件

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件

鼠标事件方法的区别

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件

window事件

调整窗口大小时，完成页面特效$(selector).resize( );

绑定事件与移除事件

绑定事件

使用on绑定一个事件，不仅可以绑定一个事件也可以绑定多个事件

    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script>
    $(function(){
        //使用on绑定一个事件
        $('div').on('mouseover',function(){
            $(this).css('background-color','#ccc')
        });

        //使用on绑定多个事件
        $('div').on({
            'mouseover':function(){
                $(this).css('background-color','#ccc')
            },
            'mouseout':function(){
                $(this).css('background-color','#f00')
            }
        });


        // 使用off()移除div元素上的所有事件
        // $('div').off();
        //使用off()移除div元素上的鼠标移出事件
        $('div').off('mouseout','')
    });
</script>

移除事件
       使用off()移除div元素上的所有事件
           $('div').off();
       使用off()移除div元素上的鼠标移出事件
           $('div').off('mouseout','')

复合事件

鼠标光标悬停

hover()方法相当于mouseover与mouseout事件的组合
hover(enter,leave);

<script>
    $(function(){
        $('div').hover(function(){
            $('div').css('background-color','#ccc');
        },function(){
            $('div').css('background-color','')
        })
    });
</script>

鼠标连续点击事件

toggle()方法用于模拟鼠标连续click事件
toggle(fn1,fn2,...,fnN);(使用时需要考虑到jQuery版本的问题，1.8是可以支持的)

$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)

toggle()方法不带参数，与show( )和hide( )方法作用一样
toggle( ); $("input").click(function(){$("p").toggle();})

toggleClass( )可以对样式进行切换
$("input").click(function(){$("p").toggleClass("red");})

toggle( )和toggleClass( )总结

toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

<body>
    <p>我是恁爹！</p>
    <button>显示/隐藏</button>
</body>
<script>
    $(function(){
        //获取button元素并添加点击事件
        $('button').click(function(){
            //获取p元素
            $('p').toggle();
        });
    });
</script>

动画

控制元素显示与隐藏

show() 控制元素的显示，hide( )控制元素的隐藏
$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])
speed:可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback:可选。show函数执行完之后，要执行的函数

改变元素的透明度

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
speed:可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback:可选。show函数执行完之后，要执行的函数

改变元素高度

slideDown() 可以使元素逐步延伸显示 $(selector).slideDown ([speed],[callback])
slideUp()则使元素逐步缩短直至隐藏 $(selector).slideUp ([speed],[callback])

    <style>
        header{
            width: 200px;
            height: 100px;
        }
        div {
            width: 200px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <header>
        <div></div>
    </header>
    <button class="hidee">隐藏div</button>
    <button class="fadee">淡入div</button>
    <button class="minii">缩小div</button>
</body>
<script>
    $(function () {
        $('.hidee').click(function () {
            $('div').hide(2000, function () {
                $('div').show(500,1000);
            });
        });
        $('.fadee').click(function () {
            $('div').fadeOut(2000, function () {
                $('div').fadeTo(2000,1)
            })
        });
        $('.minii').click(function () {
            $('div').slideUp(2000, function () {
                $('div').slideDown(500);
            });
        });
    });
</script>

自定义动画
$(selector). animate({params},speed,callback) animate：必须，定义形成动画的CSS属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        
        div {
            width: 100px;
            height: 100px;
            position: absolute;
        }

        .box1 {
            background-color: red;

        }

        .box2 {
            background-color: rgb(8, 8, 86);
            top: 148px;
        }

        .box3 {
            background-color: green;
            top: 248px;
        }
    </style>
</head>

<body>
    <header>
        <button class="fadee">1</button>
        <button class="sidee">2</button>
        <button class="action">3</button>
    </header>
    <hr />
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
<script>
    $(function () {
        $('.fadee').click(function () {
            $('.box1').fadeOut(2000, function () {
                $('.box1').fadeIn(2000);
            });
            $('.box2').fadeOut(2000, function () {
                $('.box2').fadeTo(2000, 0.3);
            });
            $('.box3').fadeTo(2000, 0.2);

        });
        $('.sidee').click(function () {
            $('.box2').slideUp(2000, function () {
                $('.box2').slideDown(500);
            });
        });
        $('.action').click(function () {
            $('.box1').animate({ height: '300px', opacity: '0.4' }, 1500);
            $('.box1').animate({ width: '300px', opacity: '0.8' }, 1500);
            $('.box1').animate({ height: '100px', opacity: '0.4' }, 1500);
            $('.box1').animate({ width: '100px', opacity: '0.8' }, 1500);
            $('.box2').animate({ left:'600px' ,width: '300px'}, 1500);
            $('.box2').animate({ top:'500px',height: '300px'}, 1500);
            $('.box2').animate({ left:'8px',width: '100px' }, 1500);
            $('.box2').animate({ top:'148px',height: '100px' }, 1500);
        });
    });
</script>

</html>