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>

当用户打开这个界面的时候，用户名输入框就会自动得到焦点，所以用户就可以直接输入数据。

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

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>

巴特西

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

最新文章

热门文章