jQuery常用事件详解
window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化，ready和onload同时存在时，二者都会触发执行，ready先于onload执行
<body>
<script type="text/javascript">
//定义a()和b()二个方法
function a() {
alert("JS方式");
}
function b() {
alert("JQUERY方式");
}
//使用JS方式加载a()
window.onload = function() {
a();
}
//使用jQuery方式加载b()方法
$(document).ready(function() {
b();
});
//使用jQuery最简方式加载b()方法
$(function() {
b();
});
//将js方式的onload与jquery方式的ready对比，看哪个执行快
window.onload = function() {
alert("传统");
}
$(function() {
alert("现代");
});
</script>
</body>
change：当内容改变时触发
<body>
<select id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<script type="text/javascript">
//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
$("#city").change(function() {
var $option = $("#city option:selected");
var value = $option.val();
var text = $option.text();
alert(value + ":" + text);
});
</script>
</body>
focus：焦点获取
select：选中所有的文本值
<body>
<input type="text" value="加载页面时获取光标并选中所有文字" size="50" />
<script type="text/javascript">
//加载页面时获取光标并选中所有文字
$(function() {
//光标定位文本框
$(":text").focus();
//选中文本框的所有文本
$(":text").select();
});
</script>
</body>
keyup/keydown/keypress（这几个事件发生的顺序是:keydown,keypress,keyup）
<body>
<script type="text/javascript">
//当按键弹起时，显示所按键的unicode码
$(function() {
//IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象
$(document).keyup(function() {
//获取按钮的unicode编码
var code = event.keyCode;
alert(code);
});
$(document).keydown(function() {
//获取按钮的unicode编码
var code = event.keyCode;
alert(code);
});
$(document).keypress(function() {
//获取按钮的unicode编码
var code = event.keyCode;
alert(code);
});
});
</script>
</body>
mousemove：在指定区域中不断移动触发
mouseover：鼠标移入时触发
mouseout：鼠标移出时触发
<body>
X=<input type="text" id="xID" /><br />
Y=<input type="text" id="yID" />
<script type="text/javascript">
//显示鼠标移动时的X和Y座标
$(function() {
$(document).mousemove(function() {
var x = event.clientX;
var y = event.clientY;
$("#xID").val(x);
$("#yID").val(y);
});
});
</script>
</body>
<body>
<table border="2" align="center" width="80%" id="tableID">
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>24</td>
</tr>
</table>
<hr />
<img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%;border-style:dashed;border-color:white" />
<img height="120px" src="../images/lb.jpg" style="position:absolute;left:60%;border-style:dashed;border-color:white" />
<script type="text/javascript">
//鼠标移到某行上，某行背景变色
$("table tr").mouseover(function() {
$(this).css("background-color", "blue");
});
//鼠标移出某行，某行还原
$("table tr").mouseout(function() {
$(this).css("background-color", "white");
});
//鼠标移到某图片上，为图片加边框
$("img").mouseover(function() {
$(this).css("border-color", "red");
});
//鼠标移出图片，图片还原
$("img").mouseout(function() {
$(this).css("border-color", "white");
});
</script>
</body>
submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
<body>
<form action="xxx.html" method="post">
用户名：<input type="text" /> <input type="submit" value="表单提交" />
</form>
<script type="text/javascript">
//浏览器加载web页面时触发
$(function(){
//将光标定位于文本框中
$(":text").focus();
});
//检测是否为中文，true表示是中文，false表示非中文
function isChinese(str){
if(/^[\u3220-\uFA29]+$/.test(str)){
return true;
}else{
return false;
}
}
//当表单提交前检测
$("form").submit(function(){
var flag = false;
//获取文本框的中内容
var name = $(":text").val();
//去二边的空格
name = $.trim(name);
//如果没有填内容
if(name.length == 0){
alert("用户名必填");
//将光标定位于文本框中
$(":text").focus();
//清空文本框中的内容
$(":text").val("");
}else{
//调用方法
flag = isChinese(name);
//如果不是中文
if(!flag){
alert("用户名必须填中文");
//将光标定位于文本框中
$(":text").focus();
//清空文本框中的内容
$(":text").val("");
}
}
return flag;
});
</script>
</body>
jQuery常用事件详解的更多相关文章
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- 单选框radio改变事件详解（用的jquery的radio的change事件）
单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...
- logback 常用配置详解<appender>
logback 常用配置详解 <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的 ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- 【转】logback logback.xml常用配置详解（三） <filter>
原创文章,转载请指明出处:http://aub.iteye.com/blog/1110008, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...
- logback 常用配置详解（二） <appender>
logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写 ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
- logback logback.xml常用配置详解（三）
logback logback.xml常用配置详解 <filter> <filter>: 过滤器,执行一个过滤器会有返回个枚举值,即DENY,NEUTRAL,ACCEPT其中之 ...
随机推荐
- 【清澄A1333】【整体二分+二维树状数组】矩阵乘法(梁盾)
试题来源 2012中国国家集训队命题答辩 问题描述 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. 输入格式 第一行两个数N,Q,表示矩阵大小和询问组数: 接下来N行N列一共 ...
- 未能解析目标框架“.NETFramework,Version=v4.0”的 mscorlib 错误的解决办法
查看项目属性,发现该项目的目标框架是.NET Framework 4 Client Profile ,而被引用的程序集的目标框架是.NET Framework 4,将该项目的目标框架修改成.NET F ...
- Spring MVC 获取前端参数的注解
在与前端交互的开发过程中,出现过几次无法取到参数的情况,费了些时间去排查问题,下面就简单总结一下. 注解详解 我们所要获取的前端传递参数大概可以分为以下四类: requet uri 部分的注解:@Pa ...
- C# 窗体靠近屏幕边缘自动隐藏*学习（类似于QQ）
using System; using System.Collections.Generic; using System.Drawing; using System.Windows.Forms; us ...
- [Winfrom] 捕获窗体最大化、最小化和关闭按钮的事件
const int WM_SYSCOMMAND = 0x112;const int SC_CLOSE = 0xF060;const int SC_MINIMIZE = 0xF020;const int ...
- thinkphp 中js 实现刷新
<input name="Button5" value="返回" id="Button5" style="width:56p ...
- jquery获取元素的所有宽高（包括内边距和外边距）
width() - 返回元素的宽度.height() - 返回元素的高度.innerWidth() 方法返回元素的宽度(包括内边距). innerHeight() ...
- 长期支持版本（即不自动更新版本） - Flash Player 18.0.0.268
无意中发现,适合不喜欢折腾的朋友. 下载链接:(官方:http://www.adobe.com/cn/products/flashplayer/distribution3.html) (分流:http ...
- NSDate 总结日期操作
IOS Object-c NSDate总结日期操作 //NSDate //1, 创建NSDate对象 NSDate *nowDate = [NSDate date]; NSLog(@"%@& ...
- ps的使用方法
1.打开原图素材,Ctrl + J把背景图层复制一层,按Ctrl + Shift + U去色,执行:滤镜 > 模糊 > 高斯模糊,数值4,图层混合模式为滤色,图层不透明度改为27%. 2. ...