jQuery中的事件（八）：on()、off()、bind()、unbind()、one()、hover()、hide()、show()、offset()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>事件</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.cGreen{color: #4CA902}
.cPink{color: #ED4A9F}
.cBlue{color: #0092E7}
.cCyan{color: #01A6A2}
.cYellow{color: #DCA112}
.cRed{color: #B7103B}
.cPurple{color: #792F7C}
.cBlack{color: #110F10}
.cOrange{color: #FF4500}
.cGray{color: #A9A9A9}
.hide{display: none;}
div {
width:100%;
text-align: center;
}
span {
border:solid 1px #A9A9A9;
padding:10px;
text-align: center;
}
.hoverCls{
color:#FF4500;
border:solid 1px #FF4500;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
/*
事件绑定与取消绑定：
on()：在选择元素上绑定一个或者多个事件处理函数！
$("p").on("click", function() {
alert($(this).text());
});
off()：在选择元素上移除一个或多个事件处理函数。
off()方法移除用.on()绑定的事件处理程序。
$("p").off("click", "**");
*/
// <input type="button" id="btn1" value="on()点击图片弹出信息">
// on：绑定一个事件。
$("#btn1").click(function() {
$("img").on("click", function() {
alert("图片被点击了！");
});
});
// <input type="button" id="btn2" value="off()取消图片的点击事件">
// off()：有参数就删除特定的事件，没有参数删除这个标签的所有事件。
$("#btn2").click(function() {
$("img").off("click");
});
// <input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">
//
$("#btn3").click(function() {
// 绑定鼠标在文档中的移动事件，对整个文档进行绑定
$(document).bind("mousemove", function(e) {
// 获取当前鼠标的位置
// 设置显示位置
$("span:eq(1)").html(e.pageX+", "+e.pageY);
});
});
// <input type="button" id="btn4" value="unbind()取消bind绑定的事件">
$("#btn4").click(function() {
// 取消
$(document).unbind("mousemove");
});
// <input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">
$("#btn5").click(function() {
// 只点击一次
$("img").one("click", function() {
alert("弹出框只会第一次点击弹出！");
});
});
// <input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">
$("#btn6").click(function() {
$("span:first").hover(
function() {
// mouseover鼠标放在上面的时候
// 1.1 隐藏图片
$("img").hide();
// 1.2 修改span元素的样式：加个假高亮
$(this).addClass("hoverCls");
}, function() {
// 鼠标移开的时候
// 2.1 显示图片
$("img").show();
// 把span的样式修改回来
$(this).removeClass("hoverCls");
});
});
// <input type="button" id="btn7" value="如影随形">
$("#btn7").click(function() {
// 绑定鼠标在整个文档中的移动事件
$(document).bind(
"mousemove", function(e) {
$("img").offset({
"left":e.pageX, "top":e.pageY
});
});
});
/*
给所有div注册一个点击事件，
用于测试产生的事件冒泡！
*/
$("div").click(function() {
alert("触发div点击事件");
});
// <input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">
$("#btn8").click(function() {
$("img").on("click", function() {
alert("图片被点击了。");
return false;
});
});
});
</script>
</head>
<body>
<div>
<br>
<span>鼠标放上来图片不显示，鼠标移开图片再次显示</span>
<br><br>
<img alt="itcast" src="logo.png">
<br><br>
鼠标的相对位置为：<span style="border:0px;"></span>
</div>
<div style="clear:both;"></div>
<br><br>
<hr>
<input type="button" id="btn1" value="on()点击图片弹出信息">
<input type="button" id="btn2" value="off()取消图片的点击事件">
<input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">
<input type="button" id="btn4" value="unbind()取消bind绑定的事件">
<input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">
<input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">
<input type="button" id="btn7" value="如影随形">
<input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">
</body>
</html>
jQuery中的事件（八）：on()、off()、bind()、unbind()、one()、hover()、hide()、show()、offset()等的更多相关文章
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
Jquery中的事件绑定:$("#btn").bind("click",function(){ }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...
- jQuery中绑定事件bind() on() live() one()的异同
jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...
- Javascript事件模型系列（三）jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- jQuery中的事件监听方式及异同点
jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- jQuery：详解jQuery中的事件（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery：详解jQuery中的事件（一）
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- jQuery学习笔记（三）jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
随机推荐
- 从新建文件夹开始构建ShadowPlay Engine游戏引擎（4）
本篇序言 这次博客更新距离上次的时间间隔变短了好多,因为最近硬是抽出了一大部分时间来进行引擎的开发.而且运气很好的是在写链表这种很"敏感"的的数据结构的时候并没有出现那种灾难性的后 ...
- pytest框架
1.添加日志 import logging logging.debug('This is debug message') logging.info('This is info message') lo ...
- eladmin-plus V2.0.0 发布，单表链式调用更丝滑
一.项目简介 eladmin的mybatis-plus版本,单表使用链式调用,代码更简洁,调用更便捷.目前更新到2021年7月.项目基于 Spring Boot 2.4.2 . Mybatis-plu ...
- Select、Poll、Epoll IO复用技术
简介 目前多进程方式实现的服务器端,一次创建多个工作子进程来给客户端提供服务, 但是创建进程会耗费大量资源,导致系统资源不足 IO复用技术就是让一个进程同时为多个客户端端提供服务 IO复用技术 之 S ...
- videojs文档翻译-SeekBar
SeekBar 拖动条和进度条的容器. 使用PlayProgressBar作为其栏. 构造函数 new SeekBar(player, optionsopt) 创造此类的实例 Parameters: ...
- sql server 查看数据库配置等信息（字符集，编码格式，版本号...）
select SERVERPROPERTY(N'edition') as Edition --数据版本,如企业版.开发版等,SERVERPROPERTY(N'collation') as Collat ...
- 记一次 GitLab 的迁移过程
目录 1. 迁移背景 2. GitLab 整体架构介绍 3. GitLab 安装 配置选择 安装方式选择 安装的网络区域 安装 GitLab GitLab 常用命令 配置管理员账号密码 4. 配置 G ...
- Spring WebFlux 基础教程：WebSocket 使用
WebSocket 协议简介 WebSocket 协议提供了一种标准化的方式,在客户端和服务端建立在一个TCP 连接之上的全双工,双向通信的协议. WebSocket 交互开始于 HTTP 请求,使用 ...
- Java 14 新功能介绍
不做标题党,认认真真写个文章. 文章已经收录在 Github.com/niumoo/JavaNotes 和未读代码博客,点关注,不迷路. Java 14 早在 2019 年 9 月就已经发布,虽然不是 ...
- gRPC学习之二：GO的gRPC开发环境准备
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos gRPC学习系列文章链接 在CentOS7部署和设置G ...