jQuery事件处理与动画效果详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62343228/article/details/123953647

jQuery的事件处理

1.页面载入事件

$(document).ready()  --  onload

2.事件绑定（bind）

bind(type,[data],fn)

type：表示事件类型（click、mouseover、mouseout…）
[data]：可选参数，表示传递给事件对象的额外数据
fn：是一个函数，（事件处理函数），当事件发生时执行的函数。

<body>
    <button id="btn">确定</button>
</body>
<script>
    $(function(){
        $("#btn").bind("click",function(){
            alert("事件绑定");
        })
    })
</script>

3.反绑定事件（unbind）

unbind([type],[data]):删除绑定的事件

不带参数：删除元素上绑定的所有事件
带参数：[type]表示事件类型

4.一次性绑定事件（one）

一次性绑定事件（one）：绑定的事件只能执行一次

<body>
    <img src="../../images/p1.jpg" alt="" width="300" height="180">
</body>
<script>
    $(function(){
        //通过鼠标的悬停、离开事件改变img的图像
        $("img").bind("mouseover",function(){
           $("img").attr({
               src:"../../images/p2.jpg",    //this表示的是当前img
            })
        })

        // $("img").bind("mouseout",function(){
        //     $(this).attr({
        //         src:"../../images/p1.jpg",
        //     })
        // })

        // $("img").unbind("mouseout");

        $("img").one("mouseout",function(){
                $(this).attr({
                    src:"../../images/p1.jpg",
                 })
        })
    })
</script>

5.模拟鼠标悬停（hover）

<body>
    <div style="width: 200px; height: 200px;background-color: red;"></div>
</body>
<script>
    $(function(){
        $("div").hover(function(){
            $(this).css("backgroundColor","blue")
        })
    })
</script>

jQuery动画效果

1.显示/隐藏

（1）显示：show（）

show(speed，[callback]);

<style>
    img{
        display: none;
    }
</style>
<body>
    <button id="btn_show">显示</button>
    <br><br>
    <img src="../../images/p1.jpg" alt="" width="300px" height="180px">
</body>
<script>
    $(function(){
        $("#btn_show").bind("click",function(){
            $("img").show(3000);    //表示在3秒钟内将图片显示出来
        })
    })
</script>

（2）hide（）

hide(speed,[callback]);

<style>
    img{
        display: none;
    }
</style>
<body>
    <button id="btn_show">显示</button>

    <button id="btn_hide">隐藏</button>
    <br><br>
    <img src="../../images/p1.jpg" alt="" width="300px" height="180px">
</body>
<script>
    $(function(){
        $("#btn_show").bind("click",function(){
            $("img").show(3000);    //表示在3秒钟内将图片显示出来
        })
        $("#btn_hide").bind("click",function(){
            $("img").hide(1000);
        })
    })
</script>

（3）交替（）

toggle(speed,[callback]);

<style>
    img{
        display: none;
    }
</style>
<body>
    <button id="btn_show">显示</button>

    <button id="btn_hide">隐藏</button>

    <button id="btn_toggle">交替</button>
    <br><br>
    <img src="../../images/p1.jpg" alt="" width="300px" height="180px">
</body>
<script>
    $(function(){
        $("#btn_show").bind("click",function(){
            $("img").show(3000);    //表示在3秒钟内将图片显示出来
        })
        $("#btn_hide").bind("click",function(){
            $("img").hide(1000);
        })
        $("#btn_toggle").bind("click",function(){
            $("img").toggle(2000);
        })
    })
</script>

2.向上收缩/向下展开

（1）收缩：slideUp

slideUp(speed,[callback]);

（2）展开：slideDown

slideDown(speed,[callback]);

（3）交替：sildeToggle

slideToggle(speed,[callback]);

<body>
    <button id="btn_up">收缩</button>
    <button id="btn_down">展开</button>
    <button id="btn_toggle">交替</button>

    <br><br>
    <img src="../../images/p2.jpg" alt="" width="320px" height="180px">
</body>
<script>
    $(function(){
        $("#btn_up").bind("click",function(){
            $("img").slideUp();
        })

        $("#btn_down").bind("click",function(){
            $("img").slideDown();
        })

        $("#btn_toggle").bind("click",function(){
            $("img").slideToggle(1500);
        })
    })
</script>

3.淡入/淡出

（1）淡入：fadeIn（）

fadeIn(speed,[callback]);

（2）淡出：fadeOut（）

fadeOut(speed,[callback]);

（3）交替：fadeToggle（）

fadeToggle(speed,[callback]);

<style>
    img{
        display: none;
    }
</style>
<body>
    <button id="btn_fadeIn">淡入</button>
    <button id="btn_fadeOut">淡出</button>
    <button id="btn_toggle">交替</button>

    <br><br>
    <img src="../../images/p1.jpg" alt="" width="320px" height="180px">
</body>
<script>
    $(function(){
        $("#btn_fadeIn").bind("click",function(){
            $("img").fadeIn(2000);    //改变图片透明度
        })

        $("#btn_fadeOut").bind("click",function(){
            $("img").fadeOut(2000);
        })

        $("#btn_toggle").bind("click",function(){
            $("img").fadeToggle(1500);
        })
    })
</script>