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中有它的独特方式来阻止事件的冒泡 ...
随机推荐
- Go安装一些第三方库
原文链接:https://javasgl.github.io/go-get-golang-x-packages/ 侵权联系删除! go在go get 一些 package时候的会由于众所周知的原因而无 ...
- [置顶]
【机器学习PAI实践十一】机器学习PAI为你自动写歌词,妈妈再也不用担心我的freestyle了(提供数据、代码
背景 最近互联网上出现一个热词就是"freestyle",源于一个比拼rap的综艺节目.在节目中需要大量考验选手的freestyle能力,freestyle指的是rapper即兴的 ...
- LambdaMART简介——基于Ranklib源码(一 lambda计算)
学习Machine Learning,阅读文献,看各种数学公式的推导,其实是一件很枯燥的事情.有的时候即使理解了数学推导过程,也仍然会一知半解,离自己写程序实现,似乎还有一道鸿沟.所幸的是,现在很多主 ...
- vue music-抓取歌单列表数据(渲染轮播图)
下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...
- HDU2874Connections between cities( LCA )Tarjan
Problem Description After World War X, a lot of cities have been seriously damaged, and we need to r ...
- scrapy多线程文件下载
在爬取数据时有时候有些文件数据需要爬取下载下来使用多线程下载可以让程序跑的更快点. scrapy中有个扩展可以使用扩展模块来实现下载. 在自己的spider中加入 custom_settings cl ...
- win10 下ie11安装flash debuger (install flashplayer debuger on win10 64bit)
1不能安装的现象 由于win10 ie11 内置flash 微软不让用户自己手动更新ie11的flash以及安装flash debugger ,这怕是让还在用 flex 开发的大胸弟们很头疼 ...
- 用JavaScript解决Placeholder的IE8兼容问题
<script type="text/javascript"> if( !('placeholder' in document.createElement('input ...
- 黄聪:V2010中C#实现友好的等待任务完成时,出现的多线程悬浮窗体
实现效果如下: 项目已经打包后,大家直接下载吧:[HCWaitForm.rar]
- [转][Dapper]SQL 经验集
condition.Append(" AND ChineseName like @name"); p.Add("@name", "%" + ...