JQuery 课时16：JQuery表单事件

最新推荐文章于 2024-09-08 21:45:17 发布

卷毛崽

最新推荐文章于 2024-09-08 21:45:17 发布

阅读量461

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_42221321/article/details/118490746

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

JQuery 课时15：JQuery事件对象

1、focus()-获得焦点事件
2、blur()-失去焦点事件
3、change()-一个元素的值改变就会触发，仅限于input、select、textarea
4、select()，当选择元素中的文本中触发，仅限于input type=text、select、textarea
5、submit(),当用户提交表单时触发，只能用于form表单上

1、focus()-获得焦点事件

<!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-3.6.0.js"></script>
</head>
<body>
    <form action="">
        <input id="target" type="text" value="field 1">
        <input  type="text" value="field 2">
    </form>
    <script>
        $(function(){
            // 当一个框点击时获得了焦点
            $("#target").focus(function(){
                alert("获得焦点");
            })

        })
    </script>
</body>
</html>

在这里插入图片描述

2、blur()-失去焦点事件

<!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-3.6.0.js"></script>
</head>
<body>
    <form action="">
        <input id="target" type="text" value="field 1">
        <input  type="text" value="field 2">
    </form>
    <script>
        $(function(){
            // 当一个框点击时获得了焦点
            $("#target").blur(function(){
                alert("失去焦点");
            })

        })
    </script>
</body>
</html>

在这里插入图片描述

3、change()-一个元素的值改变就会触发，仅限于input、select、textarea

<!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-3.6.0.js"></script>
</head>
<body>
    <form action="">
        <input id="target" type="text" value="field 1">
        <input  type="text" value="field 2">
    </form>
    <script>
        $(function(){
            $("#target").change(function(){
                alert("内容改变了");
            })

        })
    </script>
</body>
</html>

在这里插入图片描述

4、select()，当选择元素中的文本中触发，仅限于input type=text、select、textarea

<!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-3.6.0.js"></script>
</head>
<body>
    <form action="">
        <input id="target" type="text" value="field 1">
        <input  type="text" value="field 2">
    </form>
    <script>
        $(function(){
            $("#target").select(function(){
                alert("选择fled1的内容");
            })

        })
    </script>
</body>
</html>

在这里插入图片描述

5、submit(),当用户提交表单时触发，只能用于form表单上

<!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-3.6.0.js"></script>
</head>
<body>
    <form action="" id="target">
        <input type="submit" value="提交">
    </form>
    <script>
        $(function(){
            $("#target").submit(function(){
                alert("确定提交吗");
            })

        })
    </script>
</body>
</html>