javascript---jquery (1事件)
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事件)的更多相关文章
- javascript/jquery键盘事件介绍
一.首先需要知道的是:1.keydown()keydown事件会在键盘按下时触发.2.keyup()keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件3.keypress()keypres ...
- [javascript]jQuery绑定事件方法:on()
语法: $(selector).on(event,childSelector,data,function) on(event,childSelector,data,function):在被选元素及子元 ...
- jQuery 的ready事件和 JavaScript 的load事件对比
为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, ...
- JavaScript的 onclick 事件是如何调用jquery 方法的
看见个不错的问答,关于JavaScript的 onclick 事件是如何调用jquery 方法的,特此标注,链接如下:http://segmentfault.com/q/101000000033350 ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- JavaScript window.onload 事件和 jQuery ready 函数有何不同?
JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...
- 使用jQuery在javascript中自定义事件
js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- jquery css事件编程 尺寸设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- CodeForces 567B Berland National Library
Description Berland National Library has recently been built in the capital of Berland. In addition, ...
- springMVC拦截器简单配置
<!-- 拦截器 --> <mvc:interceptors> <mvc:interceptor> <!-- 拦截所 ...
- Android Stduio的使用(七)--Structure窗口
1.本篇博文介绍Android查看.Java文件中所有属性和类方法的工具:Structure窗口 2.我们知道Eclipse的OutLine窗口可以查看.java文件所有的属性和方法. 2.Andro ...
- sphinx分域搜索
http://stackoverflow.com/questions/2526407/complex-query-with-sphinx 比如要实现和如下sql代码相同的功能: SELECT * FR ...
- 实现RGB,CMY(K),YUV,YIQ,YCbCr颜色的转换算法
源:http://blog.sina.com.cn/s/blog_4d80055a01000atu.html import java.lang.Math; import java.awt.*; pub ...
- java中从含反斜杠路径截取文件名的方法
例如:获取到的文件路径为C:\Documents and Settings\Leeo\My Documents\logo.gif现在想要取得图片的名称logo.gif,我们知道反斜杠“\”是转义字符, ...
- Matplotlib中文显示的问题
原文地址:http://blog.csdn.net/rumswell/article/details/6544377 #Matplotlib中文显示有问题,当然可以修改配置文件matplotlibrc ...
- 拓扑排序的经典题目 UVA1572
紫书172的例题: 题目大意:有n种正放形,每种正方形的数量可视为无限多.已知边与边之间的结合规则,而且正方形可以任意旋转和反转,问这n中正方形是否可以拼成无限大的图案 思路:首先因为是要无穷大,所以 ...
- Android——init可执行程序
init进程是Android启动后,系统执行的第一个名称为init的可执行程序. 功能: 设备管理 解析启动脚本init.rc 执行启动脚本中的基本功能 执行启动脚本中的各种服务 代码路径:syste ...
- CodeForces 662D International Olympiad
写出前几个找规律,然后直接输出. #include<cstdio> #include<cstring> #include<cmath> #include<al ...