jQuery事件

LWT20070526

已于 2024-04-08 15:49:34 修改

阅读量121

点赞数 1

文章标签： jquery 前端 javascript

于 2024-04-08 09:23:47 首次发布

本文链接：https://blog.csdn.net/LWT20070526/article/details/137463269

版权

本文详细介绍了jQuery中的各种事件处理，包括载入事件（ready()）、鼠标事件（mouseover/mouseout,mouseenter/mouseleave）、键盘事件（keydown/keyup/keypress）、表单事件（focus/blur）以及事件绑定、移除和复合事件的使用。通过实例展示了如何在HTML和JavaScript中有效地应用这些功能。

摘要由CSDN通过智能技术生成

1.载入事件

jQuery载入事件是指html加载完后执行的事件 ready(),$(function(){})

2.鼠标事件

这里mouseover和mouseout搭配使用
这里mouseenter和mouseleave搭配使用

<!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>
    <style>
        #div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #div2{
            width: 60px;
            height: 60px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">

        </div>
    </div>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    //当鼠标移入到子级时也会执行
$("#div1").mouseover(function(){
    console.log("mouseover");
})
//当鼠标移入到子级时不会执行
$("#div1").mouseenter(function(){
    console.log("mouseenter");
})
//离开任意一个子元素和选取的元素时触发
$("#div1").mouseout(function(){
    console.log("mouseout");
})
//只离开选取的元素触发
$("#div1").mouseleave(function(){
    console.log("mouseleave");
})
</script>
</html>

3.键盘事件

<!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>
</head>
<body>
    <input type="text">
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    //键盘点击事件
    $("input").keydown(function(t02event){
        console.log(t02event);
        t02event.preventDefault(); // 阻止默认行为 每个键都有对应的keyCode 值
    })
    //键盘释放事件
    $("input").keyup(function(){
        console.log(2);
    })
    //产生可打印的字符
    $("input").keypress(function(){
        console.log(3);
    })
</script>
</html>

表单事件

<!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>
</head>
<body>
    <input type="text">
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    //获取焦点
$("input").focus(function(){
    $(this).val("123456")
})
//失去焦点
$("input").blur(function(){
    $(this).val("")
})
</script>
</html>

<!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>
</head>

<body>
    <form action="###" method="get">
        <select name="" id="">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <input type="text">
        <input type="submit" value="提交">
    </form>

</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    //当元素的值发生了改变时
    $("select").change(function () {
        console.log("值发生了改变");
    })
    $("input").change(function () {
        console.log("值发生了改变");
    })
    //只适用于form元素 当提交表单时触发 在表单提交时进行校验
    $("form").submit(function (event) {
        console.log($("select").val());
        console.log("提交");
    })
</script>

</html>

绑定事件

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;

        }
    </style>
</head>

<body>
    <div>

    </div>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    //on可以一次绑定一个或多个事件
    //绑定一个点击事件
    $("div").on("click", function () {
        $(this).css("background-color", "red")
    })
   // 绑定两个事件执行同样的步骤
    $("div").on("click mouseover",function(){
        $(this).css("background-color", "yellow")
    })
    //绑定两个事件执行不同的步骤
    $("div").on({
        mouseover:function(){
                console.log(1);
                $(this).css("background-color", "yellow")
            },
        
            mouseout:function(){
                console.log(2);
                $(this).css("background-color", "red")
            } 
    }
        
            
        
    )
</script>

</html>

移除事件

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;

        }
    </style>
</head>

<body>
    <div>

    </div>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    
    //绑定两个事件执行不同的步骤
    $("div").on({
        mouseover:function(){
                console.log(1);
                $(this).css("background-color", "yellow")
            },
        
            mouseout:function(){
                console.log(2);
                $(this).css("background-color", "red")
            } 
    })
    //移除鼠标移入事件
    $("div").off("mouseover")
    //移除鼠标移入事件和移出事件 ！！！格式需按照此写法
    $("div").off("mouseover mouseout")
    //直接删除div的所有事件
    $("div").off()
    </script>

复合事件

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;

        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    //hover里面有两个方法 第一个方法是鼠标移入事件 第二个方法是鼠标移出事件
    $("div").hover(function(){
        $(this).css("background-color", "red")
    },function(){
        $(this).css("background-color", "yellow")
    })
</script>
</html>

小结项目

<!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>
    <style>
        body {
            width: 100%;
            padding: 0;
            margin: 0;
        }

        .letter {
            position: absolute;
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 5px;
        }

        #start {
            width: 100px;
            text-align: center;
            background-color: #0070b5;
            color: #fff;
            padding: 15px 15px;
            margin: 0 auto;
        }

        #start:hover {
            cursor: pointer;
        }

        #score {
            font-size: 46px;
            text-align: right;
            top: 30px;
            right: 50px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="score"></div>
    <div id="start">开始游戏</div>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    var score = 0;
    $("#start").click(function () {
        //打开展示积分的div
        $("#score").show();
        //隐藏开始游戏按钮
        $(this).fadeOut("slow");
        //调用方法主体
        get();
    })
    function get() {
        //调用直接随机颜色方法
        var color = randomcolor();
        //获取一个从65到90的随机数
        var code = Math.floor(Math.random() * 26) + 65;
        //将数组转成字符 A~Z
        var ch = String.fromCharCode(code);
        //获取页面的宽度-300
        var swith = screen.width - 300;
        //获取高度的宽度-300
        var sheight = screen.height - 300;
        //生成随机数0到页面的宽度-300
        var top = Math.floor(Math.random() * sheight);
        //生成随机数0到页面的高度-300
        var left = Math.floor(Math.random() * swith);
        //生成一个span标签 并把这个标签的颜色 位置 和它本身的随机值插入到body文档中(需注意的是span标签的类名 一个是letter 另外一个是letter加上此值的一个数值 方便在下面进行判断是否有输入到此值)
        $("body").append('<span class="letter letter' + code + '" style="left:' + left + 'px;top:' + top + 'px;background-color:#' + color + '">' + ch + '</span>');
        //循环执行 间隔一秒
        setTimeout(get, 1000)
    }

    //生一个随机颜色的方法
    function randomcolor() {
        var color = '';
        var arr = ['a', 'b', 'c', 'd', 'e', 'f', '0', '1', '2', '3', '4', '5', '7', '8', '9']
        for (var i = 0; i < 6; i++) {
            color += arr[Math.floor(Math.random() * 15)];
        }
        return color;
    }
    $(document).keydown(function () {
        //获取你输入的键的键值
        var keycode = event.keyCode;
        //获取你页面的高度
        var height = screen.height;
        //获取到你输入的键值跟页面生成的值 匹配的话 将此键拉下去并删除 然后每次点击正确的字母时都会加积分
        $(".letter" + keycode).animate({ "top": height + "px" }, 1000, function () {
            score += 20;
            $("#score").html(score);
            $(this).remove();
        })
    })
</script>

</html>