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中的学习中为了能使让页面以 ...
随机推荐
- flutter实战demo，仿luckin coffee。
flutter_luckin_coffee flutter luckin coffee application(仿瑞幸咖啡) 目录 前言 安卓扫码体验 flutter版本信息 安装 相关插件 维护者 ...
- Easyui动态添加控件无法渲染 $.parser.parse()无效
本文链接:https://blog.csdn.net/huangbaokang/article/details/78367553动态添加easyui控件<input class="ea ...
- PAT乙级：1094 谷歌的招聘 (20分)
PAT乙级:1094 谷歌的招聘 (20分) 题干 2004 年 7 月,谷歌在硅谷的 101 号公路边竖立了一块巨大的广告牌(如下图)用于招聘.内容超级简单,就是一个以 .com 结尾的网址,而前面 ...
- Leetcode:面试题28. 对称的二叉树
Leetcode:面试题28. 对称的二叉树 Leetcode:面试题28. 对称的二叉树 Talk is cheap . Show me the code . /** * Definition fo ...
- MySQL触发器笔记
当操作了某张数据表时,希望同时触发一些动作或行为,就可以使用触发器完成. 当操作微博表时,同时生成一条日志记录 -- 插入时触发 create trigger tri_weiboAdd after i ...
- 深入刨析tomcat 之---第15篇 对应20章, myAdmin案例代码
writedby 张艳涛 有没有和我一样做到第20章的?今天基本结束了本书的阅读.最后一个案例没有demo,那我写了一回,如果有需要的可以在本地试试 路径 D:\wksp_study\designbo ...
- Linux下Nginx基础应用
Nginx简介: Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.其将源代码以类BSD许可证的形式发布,因 ...
- [剑指 Offer 28. 对称的二叉树]
剑指 Offer 28. 对称的二叉树 请实现一个函数,用来判断一棵二叉树是不是对称的.如果一棵二叉树和它的镜像一样,那么它是对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的. 1 / ...
- Java注解如何对属性动态赋值
学而不思则罔,思而不学则殆 前言 大家都用过Spring的@Value("xxx")注解,如果没有debug过源码的同学对这个操作还是一知半解,工作一年了学了反射学了注解,还是不会 ...
- bat脚本中%~dp0含义解释
在Windows脚本中,%i类似于shell脚本中的$i,%0表示脚本本身,%1表示脚本的第一个参数,以此类推到%9,在%和i之间可以有"修饰符"(完整列表可通过"for ...