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中的学习中为了能使让页面以 ...
随机推荐
- Day11继承、封装、多态-面向对象编程（2）
封装 我们设计程序要追求 高内聚,低耦合 . 高内聚:类的内部数据操作细节自己完成,不允许外部干涉 低耦合:仅暴露少量方法给外部使用 封装(数据的隐藏) 通常,应禁止直接访问一个对象中数据的实际表示, ...
- PyVista：一款Python的三维可视化软件
技术背景 三维可视化是一项在工业领域中非常重要的技术,而Python中最热门的可视化工具matplotlib和plotly,更加倾向于在数据领域的可视化,用于展现数据的结果.类似的还有百度的pyech ...
- [考试总结]noip模拟7
为啥博客园 \(\LaTeX\) 老挂???! \(\huge{\text{菜}}\) 刚开始写 \(T1\) 的时候,在看到后缀前缀之后,直接想到 \(AC\) 自动机,在画了半个 \(trie\) ...
- python 环境遇到的报错
pipenv install -r requirements.txt 时遇到错误: `Command "python setup.py egg_info" failed with ...
- SpringCloud升级之路2020.0.x版-2.微服务框架需要考虑的问题
本系列为之前系列的整理重启版,随着项目的发展以及项目中的使用,之前系列里面很多东西发生了变化,并且还有一些东西之前系列并没有提到,所以重启这个系列重新整理下,欢迎各位留言交流,谢谢!~ 上图中演示了一 ...
- Jarvis OJ部分逆向
Jarvis OJ部分逆向题解 很久没有写博客了,前天上Jarvis OJ刷了几道逆向,保持了一下感觉.都是简单题目,写个writeup记录一下. easycrackme int __cdecl ma ...
- Java方法01——什么是方法
例子 package method;public class Demon02 { //main 方法 public static void main(String[] args) { //实际参数:实 ...
- 最全总结 | 聊聊 Python 数据处理全家桶（PgSQL篇）
1. 前言 大家好,我是安果! Python 数据处理全家桶,截止到现在,一共写过 6 篇文章,有兴趣的小伙伴可以去了解一下! 最全总结 | 聊聊 Python 数据处理全家桶(Mysql 篇) 最全 ...
- elk 7.9.3 版本容器化部署
ELK-V7.9.3 部署 为什么用到ELK? 平时我们需要进行日志分析的时候,可以直接在日志文件中 grep.awk 就可以过滤出自己想要的信息及关键字,但规模较大的场景中,此方法极大的减低了效率, ...
- CobaltStrike去除流量特征
CobaltStrike去除流量特征 普通CS没有做流量混淆会被防火墙拦住流量,所以偶尔会看到CS上线了机器但是进行任何操作都没有反应.这里尝试一下做流量混淆.参考网上的文章,大部分是两种方法,一种 ...