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其中之 ...
随机推荐
- 在Mac OS上搭建本地服务器
我们在做网络编程的时候一般是需要有网络环境的,这样可以边写边测试达到很高的效率.但有些时候我们由于很多原因我们的电脑无法连接到网络,这时就会感觉很不自在,所以今天在这里教大家怎么用自己电脑作服务器. ...
- 通常我们使用[NSDate date]方法得到的时间与当前时间不一致，如何解决？
NSDate *date = [NSDate date]; NSTimeZone *zone = [NSTimeZone systemTimeZone]; NSInteger interv ...
- php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
本篇文章是对php输出echo.print.print_r.printf.sprintf.var_dump的区别进行了详细的分析介绍,需要的朋友参考下 用.net开发已经5年了,最近突然想接触 ...
- 从零开始学java(猜数字游戏)
练练手不喜勿喷,看到什么学习什么第一次发博客格式就见见谅..... 2016-07-21 19:55:02 imp ...
- Invalid project description overlaps the location of another project [android]
解决办法: 1.将工程放到其他目录下,然后执行Android工程的导入,导入时可以选择“Copy projects into workspace”: 2.不用Android工程导入,而用普通的工程导入 ...
- PHP中定义常量的几种方式与区别
[问]在php中定义常量时,const与define的区别? [答]使用const使得代码简单易读,const本身就是一个语言结构,而define是一个函数.另外const在编译时要比define快很 ...
- PHP 数组转JSON数据(convert array to JSON object);
<?php header('Content-type: appliction/json; charset=shift-JIS'); $data =array(); class Test { pu ...
- 新一代的代码编辑神器Sublime Text 3（使用指南）
首先附上官网下载链接:http://www.sublimetext.com/3 接下来是安装sublime最强大的插件功能:Package Control 一.简单的安装方法 使用Ctrl+`快捷键或 ...
- 总结几种C#窗体间通讯的处理方法
摘要:本文介绍了C#窗体间通讯的几种处理方法,即传值.继承.事件回调,希望对大家有用. http://www.cnblogs.com/jara/p/3439603.html 应用程序开发中,经常需要多 ...
- mysql数据库管理备份运维常用命令
登陆mysql: mysql -u root -p password 远程访问开启((%)表示任何主机连接,可以换固定IP来访问远程连接): GRANT ALL ON *.* TO root@'%' ...