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辅助类 \ 先放个图, ...
随机推荐
- 算法习题---5.12城市正视图<离散化应用>（Uva221）*****
一:题目 给定n坐房子的西南角坐标x, y.还有宽度w,长度d(其实没用),高度h.问从南面看过去能看到几座房子. 城市俯视图和主视图 注意: 输出主视图中能够看到的所有建筑物按照左下角x坐标从小到大 ...
- 静态站点生成器-html-markdown-hugo
推荐指数:
- json 反序列化成键值对
通过JsonConvert.DeserializeObject<Dictionary<string, object>>(string value)方法反序列化为字典数据,在通过 ...
- jstat介绍
命令可用选项 ➜ ~ jstat -options -class -compiler -gc -gccapacity -gccause -gcmetacapacity -gcnew -gcnewcap ...
- sonar：查询全部项目的bug和漏洞总数（只查询阻断/严重/主要级别）
1.统计所有项目主要以上的漏洞和bug -- 统计所有项目主要以上的漏洞和bug ,) AND severity IN('BLOCKER','CRITICAL','MAJOR') 2.统计所有某个项目 ...
- CF1266C Diverse Matrix
思路:构造题. 实现: #include <bits/stdc++.h> using namespace std; ][]; int main() { int r, c; while (c ...
- Linux下安装redis以及常用命令
https://blog.csdn.net/zgf19930504/article/details/51850594 安装: 1.获取redis资源 wget http://download.redi ...
- CSS 按钮水波纹特效
/* 按钮反馈之波纹 */ .ripple { position: relative; /* overflow:hidden */ 打开注释及效果不扩散在外 } .ripple:focus{ out ...
- Java中的IO流之输入流|乐字节
亲爱的乐字节的小伙伴们,小乐又来分享Java技术文章了.上一篇写到了IO流,这篇文章着重 谈谈输入流,再下次再说输出流. 点击回顾上一篇:乐字节Java之file.IO流基础知识和操作步骤 一. 输入 ...
- ubuntu gcc 安装 使用
"人多不足以依赖,要生存只有靠自己." -- 拿破仑 gcc是什么:-------------------------- Linux系统下的Gcc(GNU C Compiler)是 ...