发表于: 2020-03-02 23:42:25

1 1472


今天完成的事情:今天学习了JQ的事件
明天计划的事情:继续学习JQ库的内容
遇到的问题:实际操作不熟练需要多加练习
收获:jQuery 是为事件处理特别设计的。

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

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

实例:

在元素上移动鼠标。

选取单选按钮

点击元素

在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。

jQuery click() 方法,例如

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                alert("段落被点击了。");
            });
        });
    </script>
</head>

<body>

    <p>点击这个段落。</p>

</body>

</html>

运行结果

点击

又如

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").click();
            });
        });
    </script>
</head>

<body>

    <button>触发 p 元素上的 click 事件</button>
    <p onclick="alert('Click 事件被触发')">这是一个段落。</p>

</body>

</html>

运行结果

点击

添加函数到 click 事件:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                $(this).fadeOut();
            });
        });
    </script>
</head>

<body>

    <p>点击这个段落,使其消失。</p>

</body>

</html>


运行结果

点击

消失了

jQuery keypress() 方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        i = 0;
        $(document).ready(function () {
            $("input").keypress(function () {
                $("span").text(i += 1);
            });
        });
    </script>
</head>

<body>

    输入你的名字: <input type="text">
    <p>按键的次数: <span>0</span></p>

</body>

</html>

运行结果

随意输入

定义和用法

与 keypress 事件相关的事件顺序:

keydown - 键按下的过程

keypress - 键被按下

keyup - 键被松开

keypress() 方法触发 keypress 事件,或规定当发生 keypress 事件时运行的函数。

keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。

然而,keypress 事件不会触发所有的键(比如 ALT、CTRL、SHIFT、ESC)。请使用 keydown() 方法来检查这些键。

jQuery submit() 方法,当提交表单时,显示警告框:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("form").submit(function () {
                alert("提交");
            });
        });
    </script>
</head>

<body>

    <form action="">
        First name:
        <input type="text" name="FirstName" value="Mickey"><br>
        Last name:
        <input type="text" name="LastName" value="Mouse"><br>
        <input type="submit" value="提交">
    </form>

</body>

</html>

运行结果

点击

定义和用法

当提交表单时,会发生 submit 事件。

该事件只适用于 <form> 元素。

submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。

jQuery dblclick() 事件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("p").dblclick(function () {
                alert("这个段落被双击。");
            });
        });
    </script>
</head>

<body>

    <p>双击这个段落。</p>

</body>

</html>


运行结果

双击

定义和用法

当双击元素时,触发 dblclick 事件。

dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数。

提示:dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素,则会产生问题。

jQuery keydown() 方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("input").keydown(function () {
                $("input").css("background-color""yellow");
            });
            $("input").keyup(function () {
                $("input").css("background-color""pink");
            });
        });
    </script>
</head>

<body>

    输入你的名字: <input type="text">
    <p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>

</body>

</html>

运行结果

点击输入

颜色改变

定义和用法

与 keydown 事件相关的事件顺序:

keydown - 键按下的过程

keypress - 键被按下

keyup - 键被松开

当键盘键被按下时发生 keydown 事件。

keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。

剩下的明天继续进行


返回列表 返回列表
评论

    分享到