常用的JQuery事件(一)

初级呈序猿

于 2022-11-02 10:19:58 发布

阅读量277

点赞数

分类专栏： JQuery 文章标签： jquery 前端

本文链接：https://blog.youkuaiyun.com/m0_73001037/article/details/127645208

版权

JQuery 专栏收录该内容

5 篇文章

订阅专栏

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

文章目录

复合事件
键盘事件
绑定事件(1)
绑定事件(2)
切换方法
动画效果
自定义动画

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义了点击后触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

一、复合事件

<body>
    <div class="box"></div>
</body>
<script>
    //页面加载
    $(function () {
        // hover事件将移入和移出两个事件合并处理
        $(".box").hover(function () {
            //处理进入
            console.log("鼠标移入盒子");
        }, function () {
            //处理出去
            console.log("鼠标移出盒子");
        })
    })

</script>

二、键盘事件

<body>
    <div class="box"></div>
</body>
<script>
    //页面加载
    $(function () {
        $(window).keydown(function (e) {
            console.log("键盘按下! ", e.key);
        })
    })
</script>

三、绑定事件(1)

<!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.1.min.js"></script>
    <style>
        div {
            /*提升优先级! important*/
            margin-bottom: 20px !important;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: auto;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box2"></div>
    <button id="delClickBtn">解除box2的点击事件</button>
</body>
<script>
    //页面加载
    $(function () {
        //给box绑定点击事件
        $(".box").bind("click", function () {
            alert("我被点击了");
        })
        //给他box2绑定点击事件移出事件
        $(".box2").bind({
            "click": function () { alert("box2被点击了!") },
            "mouseout": function () { alert("鼠标移出box2 !") }
        })
        $("#delClickBtn").click(function () {
            //解除box2绑定的点击事件﹑方法unbind()
            $(".box2").unbind("click");
        })
    })
</script>
    
</html>

四、绑定事件(2)

<!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.1.min.js"></script>
    <style>
        div {
            /*提升优先级! important*/
            margin-bottom: 20px !important;
        }

        .box {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 50px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #addEleBtn {
            position: fixed;
            left: 20px;
            top: 40px;
            width: 150px;
            height: 60px;
            background-color: orangered;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

        .small {
            width: 60px;
            height: 60px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button id="addEleBtn">添加盒子内部元素</button>
</body>
<script>
    // //全局方法 利用原生js里面  onclick绑定全局方法可以解决未来元素事件的问题
    // function say() {
    //     alert("say Hi");
    // }
    //页面加载
    $(function () {
        $("#addEleBtn").click(function () {
            //创建小盒子，然后将小盒子放到大盒子里面
            // let $smallBox = $(`<div class="small" onclick='say()';></div>`);
            let $smallBox = $(`<div class="small"></div>`);
            $smallBox.appendTo($(".box"));
        })
        //如果页面还没有小盒子呢?以下代码会执行吗?
        //给小盒子绑定一个点击事件
        // $(".small").click(function () { alert("small click ! !")})
        //换成bind绑定试试
        // $(".small").bind("click", function () {
        //     console.log("222");
        //     alert(" small click ! ! ! ")
        // })
        //换成on试试
        //$(selector).on(event,childselector,data,function)
        /*
        event   必需。规定要从被选元素添加的一个或多个事件或命名空间。由空格分隔多个事件值，
        childSelector   可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身
        data   可选。规定传递到函数的额外数据
        function   可选。规定当事件发生时运行的函数
        */
        //.box是html中一开始就存在的网页元素，用on绑定它后代元素.small
        // document是所有dom元素的祖先
        $(document).on("click", ".small", function () {
            alert("small on click !!!");
        })
    })
</script>

</html>

五、切换方法

定义：

toggle() 方法在被选元素上进行 hide() 和 show()之间的切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种切换的效果。

注释：隐藏的元素不会被完全显示（不再影响页面的布局）。

提示：该方法可被用于自定义函数之间的切换。

语法:

$(selector).toggle(speed,easing,callback)

<!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.1.min.js"></script>
    <style>
        body {
            display: flex;
        }

        .box1,
        .box2 {
            display: inline-block;
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 20px 60px;
        }

        .active {
            background-color: orangered;
            border: 3px solid #ccc;
            padding: 20px;
        }

        button {
            width: 120px;
            height: 40px;
            background-color: aqua;
            color: #fff;
            font-weight: bold;
            margin-right: 60px;
        }
    </style>
</head>

<body>
    <div class="box1 active"></div>
    <div class="box2"></div>
    <button id="toggleBtn">切换显示和隐藏</button>
    <button id="toggleClassBtn">切换样式</button>
</body>
<script>
    $(function () {
        //点击toggleBtn显示和隐藏box2
        $("#toggleBtn").click(function () {
            console.log("11");
            $(".box2").toggle();
        })
        //点击toggleclassBtn切换box1样式
        $("#toggleClassBtn").click(function () {
            $(".box1").toggleClass("active");
        })
    })
</script>

</html>

六、动画效果

jQuery 效果 - 淡入淡出、滑动、隐藏和显示

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <style>
        .box {
            display: inline-block;
            width: 300px;
            height: 500px;
            background-color: red;
            margin-right: 40px 100px;
        }

        .ctrol {
            position: absolute;
            width: 100%;
            height: 100px;
            border: 1px solid blue;

        }

        button {
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            font-weight: bold;
            position: absolute;
        }

        #Btn1 {
            left: 30px;
        }

        #Btn2 {
            left: 150px;
        }

        #Btn3 {
            left: 330px;
        }

        #Btn4 {
            left: 450px;
        }

        #Btn5 {
            left: 620px;
            ;
        }

        #Btn6 {
            left: 780px;
        }
    </style>
</head>

<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="ctrol">
        <button id="Btn1">渐隐</button><button id="Btn2">渐显</button>
        <button id="Btn3">淡入</button><button id="Btn4">淡出</button>
        <button id="Btn5">上伸</button><button id="Btn6">下拉</button>
    </div>
</body>
<SCript>
    $(function () {
        $("#Btn1").click(function () {
            // hide(毫秒数)
            $(".box1").hide(2000);
        })
        $("#Btn2").click(function () {
            // show(毫秒数)
            $(".box1").show(1000);
        })
        $("#Btn3").click(function () {
            // fadeout(毫秒数)
            $(" .box2").fadeOut(3000);
        })
        $("#Btn4").click(function () {
            //fadeIn(毫秒数)
            $(".box2").fadeIn(1000);
        })
        $("#Btn5").click(function () {
            // slideDown(毫秒数)
            $(".box3").slideDown(3000);
        })
        $("#Btn6").click(function () {
            // slideup(毫秒数)
            $(".box3").slideUp(2000);
        })
    })
</SCript>

</html>

七、自定义动画

jQuery 动画 - animate() 方法：

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <button id="btn">动画</button>
</body>
<script>
    $(function () {
        $("#btn").click(function () {
            console.log("111");
            //自定义动画
            $("div").animate({ 'width': "500px", opacity: "0.5" }, 3000);
        })
    })
</script>

</html>