JQUERY事件绑定

最新推荐文章于 2025-03-30 20:51:34 发布

原创最新推荐文章于 2025-03-30 20:51:34 发布

· 1.2k 阅读

0 ·

版权

文章标签：

#jquery #前端

一、jq表格点击添加并选中的删除

<!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="../jq/jquery.min.js"></script>
</head>
 
<body>
    <p>
        学号： <input type="text" name="" id="sid"> 姓名： <input type="text" name="" id="uname"> 年龄： <input type="text" name="" id="age">
        <input type="button" value="添加" id="btn1">
        <input type="button" value="删除" id="btn2">
    </p>
    <table border="1">
        <tr>
            <th><input type="checkbox" id="seleciAll"></th>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>1001</td>
            <td>张三</td>
            <td>19</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>1002</td>
            <td>李四</td>
            <td>20</td>
        </tr>
    </table>
 
    <script>
        $(function() {
            $("#btn1").click(function() {
                    //获取信息的值
                    var Id = $("#sid").val()
                    var Name = $("#uname").val()
                    var Age = $("#age").val()
                        // console.log(Id);
                        // console.log(Name);
                        // console.log(Age);
                        //整合信息
                    var tr = $("<tr><td><input type='checkbox'></td><td>" + Id + "</td><td>" + Name + "</td><td>" + Age + "</td></tr>")
 
                    $("table").append(tr)
                })
                //删除
            $("#btn2").click(function() {
                $("table tr td input:checked").parent().parent().remove()
 
            })
        })
    </script>
</body>
 
</html>

如图显示：

二、事件绑定

常规方法：$(选择器).click
bind：bind(事件类型，事件处理函数)
on：$(选择器).on("click", function() {}（一次性可以绑定多个事件）

on进行事件绑定是可以实现动态绑定

$("body").on("click", "div", function() {

$(this).css("color", "red")
})

<!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="../jq/jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
 
<body>
    <div>这是一个div</div>
    <input type="button" value="添加" id="btn">
    <script>
        $(function() {
            $("div").on({
                "click": function() {
                    $(this).css("color", "red")
                },
                "mouseover": function() {
                    $(this).css("background-color", "aqua")
                },
                "mouseout": function() {
                    $(this).css("background-color", "green")
                }
            })
            $("#btn").click(function() {
                $("body").append("<div>这是一个新的div</div>")
                $("body").on("click", "div", function() {
                    $(this).css("color", "red")
                    $(this).css("background-color", "pink")
                })
 
            })
 
        })
    </script>
</body>
 
</html>

如图显示：

三、键盘事件

keydown是在键盘按下就会触发，keyup是在键盘松手就会触发

案例：（点击A、B、C、D变颜色并且点击上下左右建会移动）

<!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="../jq/jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
 
<body>
    <div>这是一个div</div>
 
    <script>
        $(function() {
            var x = 0
            $(document).on("keydown", function(e) {
                switch (e.keyCode) {
                    case 65:
                        $("div").css("background-color", "blue")
                        break;
                    case 66:
                        $("div").css("background-color", "green")
                        break;
                    case 67:
                        $("div").css("background-color", "aqua")
                        break;
                    case 68:
                        $("div").css("background-color", "black")
                        break;
                    case 39:
                        x += 10
                        $("div").css("left", x + "px")
                        break;
                    case 37:
                        x -= 10
                        $("div").css("left", x + "px")
                        break;
                    case 38:
                        x -= 10
                        $("div").css("top", x + "px")
                        break;
                    case 40:
                        x += 10
                        $("div").css("top", x + "px")
                        break;
                    default:
                        break;
                }
            })
        })
    </script>
</body>
 
</html>