• jquery中的trigger()和preventDefault()方法


    trigger()方法用户模拟用户操作,比較常见的一种情况就是输入框自己主动获得焦点:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <title>jquery</title>
    </head>
    
    <body>
    <form name="login">
      <input type="text" id="username"><br/>
      <input type="password" id="pwd"><br/>
      <input type="submit" value="登陆">
    </form>
    </body>
    <script type="text/javascript">
       $("form[name=login] :input[id=username]").trigger("focus");
    </script>
    </html>

    当用户打开这个界面的时候,username输入框就会自己主动得到焦点,所以用户就能够直接输入数据。

    preventDefault()方法用户阻止元素的默认的行为,比方说:点击超链接的跳转的行为,点击提交button表单页面跳转的行为。

    return false; 也有阻止元素默认行为的功能,此外它还能够停止动画的冒泡。


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <title>jquery</title>
    </head>
    
    <body>
    <a href="http://www.baidu.com" name="link">哇哦,这是一个超链接~</a>
    </body>
    <script type="text/javascript">
       $("a[name=link]").click(function(event){
          event.preventDefault();
       });
    </script>
    </html>

    使用return false;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <title>jquery</title>
    </head>
    
    <body>
    <a href="http://www.baidu.com" name="link">哇哦,这是一个超链接~</a>
    </body>
    <script type="text/javascript">
       $("a[name=link]").click(function(){
          return false;
       });
    </script>
    </html>

    在进行表单验证的时候,当用户输入的数据不对的时候,表单此时就不应该跳转,演示样例代码例如以下:


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <title>jquery</title>
    <style type="text/css">
    .red{
        color:red;
    }
    </style>
    </head>
    
    <body>
    <form name="login" action="http://www.baidu.com">
      <input type="text" id="username"><br/>
      <input type="password" id="pwd"><br/>
      <input type="submit" value="登陆">
    </form>
    </body>
    <script type="text/javascript">
       $("form[name=login] :submit").click(function(event){
           $target = $("form[name=login] :input[id=username]");
           var len = $target.val().length;
           if(len < 5){
              $target.parent().find("span.red").remove();
              $warn = "<span class='red'>用户名不能至少为5位</span>";
              $target.after($warn);
              alert(len);
              event.preventDefault();
           }
       })
    
    </script>
    </html>



  • 相关阅读:
    Virtio:针对 Linux 的 I/O 虚拟化框架
    修复MySQL的MyISAM表命令check table用法
    Linux 下用 smartd 监测硬盘状况
    借助JVM生日的时机,说说关于JVM你所不知道的那些事
    实时流计算、Spark Streaming、Kafka、Redis、Exactly-once、实时去重
    使用Kafka、Elasticsearch、Grafana搭建业务监控系统(三)Elasticsearch
    zabbix监控多实例tomcat--不使用JMX
    KAFKA随机产生JMX 端口指定的问题
    nginx+keepalived高可用服务器宕机解决方案
    tomcat 内存参数优化示例
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/3993489.html
Copyright © 2020-2023  润新知