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()方法的更多相关文章

  1. 关于jQuery中的trigger和triggerHandler方法的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  3. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  4. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  5. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  6. jquery中prop()方法和attr()方法

    接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...

  7. jquery-7 jquery中的文档处理方法有哪些（方法的参数表示功能增强）

    jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强) 一.总结 一句话总结:多看参考文档,多看主干目录.一般的功能分两个方法来实现,一个对应标签,一个对应标签和事情,比如克隆 ...

  8. js进阶 10-3 jquery中为什么用document.ready方法

    js进阶 10-3  jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...

  9. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

随机推荐

  1. 实现react中的自动保存--定时任务

    1. 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或 ...

  2. 词云：解决pip install wordcloud安装过程中报错“error: command 'x86_64-linux-gnu-gcc' failed with exit status 1”问题

    外部环境:ubuntu16.04, 64bits, 全局环境python2.7 在虚拟环境(python3.5)中执行 pip install wordcloud 时安装失败,报错: error: c ...

  3. java IO 学习（三）

    java IO 学习(一)给了java io 进行分类,这一章学习这些类的常用方法 一.File 1.创建一个新的File的实例: /** * 创建一个新的File实例 */ File f = new ...

  4. ASP.NET MVC 使用NPOI导出Excel 无法访问已关闭的流(转)

    第一步重写MemoryStream , 让它不能自动关闭. //新建类 重写Npoi流方法 public class NpoiMemoryStream : MemoryStream { public ...

  5. RabbitMQ部署

    操作步骤: 安装依赖文件 -->yum install ncurses-devel 进入opt目录创建rabbitmq目录 -->cd /opt -->mkdir rabbitMQ ...

  6. UEditor自定义toolbar工具条

    使用ueditor的同学都知道,ueditor里有很多功能,很全面,但有时候我们的编辑器不需要太多的功能,比如前台评论或者留言,就不需要这么多功能了,那我们怎么去定制自己想要的工具呢?官方给出了两个方 ...

  7. 解决hue查询中文报错问题

    hue 4.0查询查询中包含中文报一下错误 (1366, Incorrect string value: \\xE4\\xBA\\xAC\\xE4\\xB8\\x9C... for column se ...

  8. xhprof使用

    一.下载安装 wget http://pecl.php.net/get/xhprof-0.9.3.tgz tar zxvf xhprof-0.9.3.tgz cd xhprof-0.9.3/exten ...

  9. Boost C++ 库 中文教程(全)

    Boost C++ 库 目录 第 1 章 简介 第 2 章 智能指针 第 3 章 函数对象 第 4 章 事件处理 第 5 章 字符串处理 第 6 章 多线程 第 7 章 异步输入输出 第 8 章 进程 ...

  10. QT 控制LED实验

    1.实验准备 在PC 机D:盘下创建文件夹qt-led,将光盘qt_led_exp 文件夹下的images 文件夹拷贝到E:盘下qt-led 文件夹qt-led 内 2.新建工程 新建一个Empty ...