1.例子说明
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
else if(username==$("#username").val()){
$("#msg").html("<p>username="+username+"</p>"); //提示信息
// event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
})
</script>
</head>
<body>
<form action="4-4-3-1.html">
用户名:<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form> <div id="msg"></div>
</body>
</html>

(1)获取元素的值----10行

(2)html中输出元素的值----16行

(3)event.preventDefault(); //阻止默认行为 ( 表单提交 )如果注释掉此句,点击提交按钮由<form action="4-4-3-1.html">可知会转到4-4-3-1.html页面

2事件对象的属性

2.1event.type

 $(function(){
$("a").click(function(event) {
alert(event.type);//获取事件类型
return false;//阻止链接跳转
});
})

事件类型是click

2.2.event.target

 $(function(){
$("a[href=http://google.com]").click(function(event) {
alert(event.target.href);//获取触发事件的<a>元素的href属性值
return false;//阻止链接跳转
});
})

event.target.href是http://google.com

2.3.event.pageX,pageY

 $(function(){
$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
return false;//阻止链接跳转
});
})

2.4.event.which

 $(function(){
$("a").mousedown(function(e){
alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
return false;//阻止链接跳转
})
})

2.5.event.metaKey,event.ctrlKey

 $(function(){
$("input").keyup(function(e){
alert(e.metaKey +" "+e.ctrlKey );
$(this).blur();
})
})

												

javascript---jquery (1事件)的更多相关文章

  1. javascript/jquery键盘事件介绍

    一.首先需要知道的是:1.keydown()keydown事件会在键盘按下时触发.2.keyup()keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件3.keypress()keypres ...

  2. [javascript]jQuery绑定事件方法:on()

    语法: $(selector).on(event,childSelector,data,function) on(event,childSelector,data,function):在被选元素及子元 ...

  3. jQuery 的ready事件和 JavaScript 的load事件对比

    为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, ...

  4. JavaScript的 onclick 事件是如何调用jquery 方法的

    看见个不错的问答,关于JavaScript的 onclick 事件是如何调用jquery 方法的,特此标注,链接如下:http://segmentfault.com/q/101000000033350 ...

  5. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  6. JavaScript window.onload 事件和 jQuery ready 函数有何不同?

    JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...

  7. 使用jQuery在javascript中自定义事件

    js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...

  8. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  9. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  10. jquery css事件编程 尺寸设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. HDU 5723 Abandoned country

    题目说每条边权值都不一样,说明最小生成树是唯一的,不存在最小期望这一说. 然后就是先求出最小生成树,随便确定一个根节点,计算出每个点的子树有多少节点,记为c[x]. 指向x的这条边被统计的次数为c[x ...

  2. 【spring boot】SpringBoot初学(2) - properties配置和读取

    前言 只是简单的properties配置学习,修改部分"约定"改为自定义"配置".真正使用和遇到问题是在细看. 一.主要 核心只是demo中的: @Proper ...

  3. context-param与init-param的区别与作用

    <context-param>的作用: web.xml的配置中<context-param>配置作用 1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件 ...

  4. HTML5来了:5个好用的混合式App开发工具

    在残酷的移动互联网竞争环境下, HTML5技术一直受到各方关注,“HTML5颠覆原生 App”的争论也从未停止过,不管怎样HTML5生态的构建方兴未艾.不过对于移动开发者来说更关心的问题是如何低成本. ...

  5. BCDedit 研究

    bcdedit的研究 系统引导安装 2009-11-12 22:21:13 阅读13 评论0 字号:大中小 首先说明下引导: 微软在Vista之前的系统,采用的是Ntldr来进行引导系统,使用的是bo ...

  6. js中的整型都是用double存储的,有时候不精确,如,

    sss=187948800449444864 187948800449444860   好像16位的时候还可以. http://segmentfault.com/a/1190000002608050

  7. 关于Jsp页面在ww:iterator 标签里面判断的写法是可以直接写数组里面的变量的

    因为上面已经遍历了,所以可以直接写变量名

  8. android-------手写签名系统的设计与实现之实现画笔设置

    引自:http://www.xuebuyuan.com/1754358.html 既然我们实现了画布和画笔,也实现了手写,为了提高可用性,我们增加了对画笔风格的设置功能,这样就可以根据自己的需要选择画 ...

  9. Java 六种异常处理的陋习(转)

    Java 六种异常处理的陋习 原文链接:  http://www.cnblogs.com/Android-and-android/archive/2013/05/02/3054469.html 你觉得 ...

  10. HaiHongOJ 1003 God Wang

    题目连接:http://oj.haihongblog.com/problem.php?id=1003 线段树维护区间最小值,并且求解下标 #include <stdio.h> #inclu ...