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其中之 ...
随机推荐
- 层模型--相对定位(position:relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...
- Eclipse启动Tomcat报错，系统缺少本地apr库
Eclipse启动Tomcat报错,系统缺少本地apr库. Tomcat中service.xml中的设置情况. 默认情况是HTTP协议的值:protocol="HTTP/1.1" ...
- Oracle通过主键id删除记录很慢
问题描述: Oracle通过主键id删除2000条记录很慢,需要花费十二分钟. 解决过程: 1.首先查看SQL的执行计划,执行计划正常,cost只有4,用到了主键索引. 2.查看等待事件, selec ...
- ICE学习第四步-----客户端请求服务器返回数据
这次我们来做一个例子,流程很简单:客户端向服务器发送一条指令,服务端接收到这条指令之后,向客户端发送数据库中查询到的数据,最终显示在DataGridView上. 根据上一篇文章介绍的Slice语法,我 ...
- 封装cookie组件
var Cookie = { // 读取 get: function(name){ var cookieStr = "; "+document.cookie+"; &qu ...
- C#应用程序获取项目路径的方法总结
一.非Web程序 //基目录,由程序集冲突解决程序用来探测程序集 1.AppDomain.CurrentDomain.BaseDirectory //当前工作目录的完全限定路径2.Envi ...
- Mysql Explain 详解
Mysql Explain 详解[强烈推荐] Mysql Explain 详解一.语法explain < table_name >例如: explain select * from t3 ...
- Java中的自动拆箱装箱（Autoboxing&Unboxing）
一.基本类型打包器 1.基本类型:long.int.double.float.boolean 2.类类型:Long.Integer.Double.Float.Boolean 区别:基本类型效率更高,类 ...
- Hotel
poj3667:http://poj.org/problem?id=3667 题目大意:Hotel有N(1 ≤ N ≤ 50,000)间rooms,并且所有的rooms都是连续排列在同一边,group ...
- FileUtils
import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...