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辅助类 \ 先放个图, ...
随机推荐
- SOD 框架
http://www.pwmis.com/sqlmap/#yyal “老坛泡新菜”-SOD MVVM框架,让WinForms焕发新春 https://blog.csdn.net/ccc82284/ar ...
- ES6深入浅出-8 新版的类(下集)-3.书籍推荐
- Element 'repository' cannot have character [children], because the type's content type is element-only.
出错现象 由于代码是网络上拷贝来的,可能存在特殊字符,在进行maven打包的时候报错 [ERROR] Malformed POM F:\ai开放平台\SRC\web知识产权申请\pom.xml: ex ...
- [lodop]css样式after、before添加content内容之前和之后
css样式可以在内容之前和之后加内容.格式是:css类名:before{content:在之前加的内容}css类名:after{content:在之后加的内容}这种写法在LODOP里直接测试是不行的, ...
- CentOS 7 搭建 GitLab
概述 GitLab 是我在日常工作中使用的代码仓库管理系统,它带有非常友好的 Web 界面,并且功能丰富.下面将介绍我在 CentOS 7 上搭建 GitLab 的步骤,以及遇到的一些问题. 关于不同 ...
- PHP 木马代码,
<?phpheader("content-Type: text/html; charset=utf-8");if(get_magic_quotes_gpc()) foreac ...
- Span复习
Span复习 using System; namespace Span复习 { class Program { static void Main(string[] args) { //Console. ...
- R镜像源的切换
如果是默认的R安装一般会很慢 install.packages(pkgs, lib, repos = getOption("repos"), contriburl = contri ...
- 设置linux系统时间的方法
尝试了好多,都是因为权限问题失败,但是总结出了几种思路: 1 通过linux指令进行设置: date -s "20091112 18:30:50" &&hwcloc ...
- LeetCode 206. 反转链表(Reverse Linked List) 16
206. 反转链表 206. Reverse Linked List 题目描述 反转一个单链表. 每日一算法2019/5/19Day 16LeetCode206. Reverse Linked Lis ...