关于jQuery_表单事件的方法和使用

最新推荐文章于 2024-09-07 13:38:28 发布

NewBurlaSKing

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/qq_55961861/article/details/126420163

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中的四个主要表单事件：focus、blur、change和submit。通过示例代码展示了如何绑定和触发这些事件，例如，当输入框获取焦点、失去焦点、内容改变以及表单提交时触发相应的处理函数。示例中，当输入框获得焦点时打印'选择焦点了'，失去焦点时打印'失去焦点了'，内容改变时打印'有内容被改变了'，提交表单时弹出警告框提示'有数据被提交了'。

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

jQuery_表单事件

一.方法

focus

为 JavaScript 的 "focus" 事件绑定一个获取焦点处理函数，或者触发元素上的 "focus" 事件。

blur

为 "blur" 事件绑定一个失去焦点处理函数
change

为JavaScript 的 "change" 事件绑定一个表单改变处理函数
submit

当用户提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在元素上

二.实例

<!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="./jQuery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="username">
    <form id="target">
        <input type="text">
    </form>
    <script>
        $('#username').focus(function() {
            console.log('选择焦点了！');
        })
        $('#username').blur(function() {
            console.log('失去焦点了！');
        })
        $('#username').change(function() {
            console.log('有内容被改变了！');
        });
        $('#target').submit(function() {
            alert('有数据被提交了！')
        })
    </script>
</body>
</html>