jQuery 事件介绍
什么是事件?页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常用的时间主要有以下几种:
click()事件:click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>click()事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我,我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>
dblclick()事件:当双击元素时,会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dblclick()事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标左键的,我就消失。</p>
<p>双击我消失!</p>
<p>双击我也消失!</p>
</body>
</html>
mouseenter()事件:当鼠标指针穿过元素时,会发生的事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseenter()事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处,会看到弹窗。</p>
</body>
</html>
mouseleave()事件:当鼠标指针离开元素时,会发生 的事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseleave()事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("再见,您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
mousedown()事件:当鼠标指针移动到元素上方,并按下鼠标按键时,会发生的事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mousedown()事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下!");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>
mouseup()事件:当在元素上松开鼠标按钮时,会发生的事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseup()事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
hover()事件:用于模拟光标悬停事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>hover()事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
)
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
focus()事件:当元素获得焦点时,发生的事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>focus()事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
blur()事件:当元素失去焦点时,发生 blur 事件。blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>blur()事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法,是 jQuery 中的核心函数。
jQuery 事件介绍的更多相关文章
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jQuery 事件用法详解
jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...
- jQuery事件与事件对象
事件是脚本编程的灵魂,本篇来介绍jQuery中的事件处理及事件对象. 事件与事件对象 首先,我们来看一下经常使用的添加事件的方式: <input type="button" ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jQuery的介绍和选择器详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 的介绍 引入 jQuery 的原因 在用 js 写代码时, ...
- 彻底弄懂jQuery事件原理二
上一篇说到,我们在最外层API的on,off,tiggler,triggerHandler调用的是event方法的add,remove和tirgger方法,本篇就来介绍event辅助类 \ 先放个图, ...
随机推荐
- Android Support v4、v7、v13、v14、v17的区别和应用场景
Android Support v4.v7.v13.v14.v17的区别和应用场景 本文链接:https://blog.csdn.net/Aquarius_Seven/article/detail ...
- Zabbix3.4指定用户才能收到报警的配置
Zabbix3.4指定用户才能收到报警的配置 .下载python微信脚本 #安装simplejson wget https://pypi.python.org/packages/f0/07/26b51 ...
- ISO/IEC 9899:2011 条款6.7.2——类型说明符
6.7.2 类型说明符 语法 1.type-specifier: void char short int long float double signed unsigned _Bool _Comple ...
- VS2015 dlib编译 x64 Debug .lib生成
VS2015 dlib编译 x64 Debug >------ 已启动生成: 项目: ZERO_CHECK, 配置: Debug x64 ------ > Checking Build S ...
- vector 移除元素
vector中移除“与某值相等”的第一个元素. std::vector<Elem> coll; ... //remove first element with value val std: ...
- linux添加动态库路劲
修改这个文件/etc/ld.so.conf.d,最后加上so的绝对路径即可
- SpringBoot中日志配置
背景 由于一些框架中还使用log4j-1.x系列陈旧的日志框架,调试过程中有一些错误信息不能在控制台显示,增加了调试成本.以下配置方法 将帮助你获得log4j-1.x日志在控制台显示. 解决方法: 使 ...
- LwIP应用开发笔记之一:LwIP无操作系统基本移植
现在,TCP/IP协议的应用无处不在.随着物联网的火爆,嵌入式领域使用TCP/IP协议进行通讯也越来越广泛.在我们的相关产品中,也都有应用,所以我们结合应用实际对相关应用作相应的总结. 1.技术准备 ...
- 关于STM32F405的GPIO中断问题
1. 下面的图,应该是多个引脚中断挂在同一个中断号上面,也就是PA0和PB0同时挂在一个中断源上面,那么就是说只能同时使用其中一个 寄存器的配置,确实只能有一个使用
- Head First Design Patterns HeadFirst 设计模式
OO原则是我们的目标,而设计模式是我们的做法. 策略模式 (Strategy) 在软件开发上,一直不变的真理是"change".不管软件设计的多好,一段时间之后,总是要成长与改变, ...