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()方法的更多相关文章
- 关于jQuery中的trigger和triggerHandler方法的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【jQuery】【转】jQuery中的trigger和triggerHandler区别
trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 浅析jQuery中常用的元素查找方法总结
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...
- jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强)
jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强) 一.总结 一句话总结:多看参考文档,多看主干目录.一般的功能分两个方法来实现,一个对应标签,一个对应标签和事情,比如克隆 ...
- js进阶 10-3 jquery中为什么用document.ready方法
js进阶 10-3 jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
随机推荐
- JSP session过期时间(小记)
以下情况,Session结束生命周期,Servlet容器将Session所占资源释放:1.客户端关闭浏览器2.Session过期3.服务器端调用了HttpSession的invalidate()方法. ...
- 一个简单的观察者模式的JS实现
这不是原创文章,主要是写给自己看的.原文比较详细容易让人,我提取最简单最好理解的部分,便于我以后用到.参考http://www.cnblogs.com/TomXu/archive/2012/03/02 ...
- IO综合练习--文件切割和文件合并
有时候一个视频文件或系统文件太大了,上传和下载可能会受到限制,这时可以用文件切割器把文件按大小切分为文件碎片, 等到要使用这个文件了,再把文件碎片合并成原来的文件即可.下面的代码实现了文件切割和文件合 ...
- lvds cable信号
http://forums.bit-tech.net/showthread.php?t=208616
- Cacti不出图
http://os.51cto.com/art/201404/434915.htmhttp://os.51cto.com/art/201109/289306.htmhttp://freeloda.bl ...
- SQL中禁用trigger
SQL中禁用所有trigger 编写人:CC阿爸 2014-6-15 在日常SQL数据库的操作中,如何快速的禁用所有trigger? --禁用某个表上的所有触发器 ALTER
- WinCE全屏手写输入法
来源地址:http://www.dwhand.com/?page_id=570 WinCE全屏手写输入法 功能特点: 1.支持手写识别,智能拼音.仓颉.注音.笔画.五笔.ABC等输入模式. 2.支持各 ...
- TS流解析 二 *****
1.TS格式介绍 TS:全称为MPEG2-TS.TS即"Transport Stream"的缩写.它是分包发送的,每一个包长为188字节(还有192和204个字节的包).包的结构为 ...
- appium的三种等待方式 (还没实践过,记录在此)
参考:https://testerhome.com/topics/2576
- 面试总结之MISC(操作系统,网络,数学,软件开发,测试,工具,系统设计,算法)
操作系统 解释堆和栈的区别. 分配在堆的内存与分配在堆栈的内存有什么不同 分配在堆的内存要手动去释放 线程与进程的区别 多线程中栈与堆是公有的还是私有的 在多线程环境下,每个线程拥有一个栈和一个程序计 ...