• JQuery事件之表单事件


    表单事件包括四个方法:submit()方法、change()方法、focus()方法、blur()方法

    一、submit()方法

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

    该事件只适用于<form>元素,submit()方法触发submit事件。或规定当发生submit事件时运行的函数。

    实例:

    <script>

    $(document).ready(function(){

        $("form").submit(function(){

            alert("提交");

        });

    });

        </script>

    </head>

    <body>

    <form action="">

        First Name:

        <input type="text" name="FirstName" value="高">

        Lastname:

        <input type="text" name="lastname" value="才磊">

        <input type="submit" value="提交">

     

    </form>

    </body>

     二、change()方法

    当元素的值改变时发生change事件(仅适用于表单字段)

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

    注意:当用于select元素时。change事件会在选择某个选项时发生。当用于text fieldtext area时,change事件会在元素失去焦点时发生。

    实例:

    <script>

     

    $(document).ready(function(){

        $("input").change(function(){

            alert("文本已被修改");

        });

    });

        </script>

    </head>

    <body>

    <input type="text">

    <p>在输入框输入一些东西。敲回车或点击输入框外部</p>

    </body>

    触发被选元素的 change 事件:语法:     $(selector).change()

    点击按钮触发 change 事件 (即使元素没有改变)。

     实例:

    <script>

     

    $(document).ready(function(){

        $("button").click(function(){

            $("input").change();

        });

    });

        </script>

    </head>

    <body>

    <p>点击按钮触发change事件。即使元素没有被改变</p>

    <button>输入框中触发change事件</button>

    <p>输入你的名字 <input type="text" value="码磊" onchange="alert(this.value)"> </p>

    添加函数到 change 事件:语法:$(selector).change(function)

    实例:

    // 添加函数到 change 事件:

    <script>

     

    $(document).ready(function(){

        $(".field").change(function(){

            $(this).css("background-color","pink");

        });

    });

        </script>

    </head>

    <body>

    <p>元素改变后执行一个函数</p>

    输入:<input type="text" class="field">

    <p>在输入框中写一些东西,按下回车,或点击输入框外的区域,输入框的颜色会改变</p>

    <p>选择:

        <select name="do" class="field">

            <option value="吃饭">吃饭</option>

            <option value="睡觉">睡觉</option>

            <option value="打豆豆">打豆豆</option>

        </select>

    </p>

    <p>在下拉列表选择一个选项,列表的颜色会改变</p>

    </body>

     三、focus方法

    当元素获得焦点时,(当通过鼠标点击选中元素或通过tab键定位到元素时),发生focus事件。Focus()方法触发focus事件,或规定当发生focus事件时运行的函数。

    该方法常与blur()方法一起使用。

    实例:

    // 3.focus()方法

     <script>

    $(document).ready(function(){

        $("input").focus(function(){

          $("span").css("display","inline").fadeOut(2000);

        });

    });

        </script>

    </head>

    <body>

     

    点击输入框获取焦点:<input type="text">

    <span>请输入</span>

    </body>

    触发被选元素的focus事件:

    $(selector).focus()

    实例:

    / 触发被选元素的focus事件:

    <script>

     

    $(document).ready(function(){

        $("#btn1").click(function(){

           $("input").focus();

        });

        $("#btn2").click(function(){

            $("input").blur();

        });

    });</script>

    </head>

    <body>

    输入你的名字:<input type="text"><br /><br />

    <button id="btn1">触发focus事件</button>

    <button id="btn2">触发blur事件</button>

    </body>

    添加函数到 focus 事件:$(selector).focus(function)

    实例:

    // 添加函数到 focus 事件:

    <script>

     

    $(document).ready(function(){

        $("input").focus(function(){

            $(this).css("background-color","yellow");

        });

        $("input").blur(function(){

            $(this).css("background-color","pink");

        });

    });

        </script>

    </head>

    <body>

    name:  <input type="text" name="fullname">

    email: <input type="text" name="em">

     

  • 相关阅读:
    群辉:服务器错误错误代码38
    群晖官方功能使用教程
    CentOS 7设置KVM硬盘模式为SCSI
    CentOS 7下软阵列的创建
    什么是NAS
    CentOS 7下KVM支持虚拟化/嵌套虚拟化配置
    Linux/CentOS实现交换机-简单的交换机实现
    Ubuntu下实现软路由(转)
    CentOS下KVM配置NAT网络(网络地址转换模式)
    CentOS 7安装tunctl
  • 原文地址:https://www.cnblogs.com/maleijiejie/p/13434444.html
Copyright © 2020-2023  润新知