码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-06-08 18:35:30      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

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

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

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

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

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

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

使用return false;

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

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

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

 

jquery中的trigger()和preventDefault()方法,布布扣,bubuko.com

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

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/zhezh/p/3775391.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!