<!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()等的更多相关文章

  1. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  2. jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...

  3. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  4. jQuery中的事件监听方式及异同点

    jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...

  5. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  6. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  7. jQuery：详解jQuery中的事件（一）

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  8. jQuery学习笔记（三）jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  9. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  10. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

随机推荐

  1. Easyui动态添加控件无法渲染 $.parser.parse()无效

    本文链接:https://blog.csdn.net/huangbaokang/article/details/78367553动态添加easyui控件<input class="ea ...

  2. ThinkPHP3.2.3 语言包切换中英文切换

    今天要用ThinkPHP3.2.3做一个小网站,其中涉及到切换中文与英文,通过查询手册和百度实现了该操作,现在将我具体的操作步骤记录下来,作为笔记和大家分享. php开发框架:ThinkPHP3.2. ...

  3. P7003 [NEERC2013]Hack Protection

    P7003 [NEERC2013]Hack Protection 题意 给定一个序列 \(a\) ,求有多少个区间满足区间内的数的异或和等于与的和的值. 思路 首先我们求一个异或前缀和 \(s\),对 ...

  4. C++第三十六篇 -- 为第一个驱动程序进行调试

    工具是VMware12+Win10+VS2017+WDK1809 https://blog.csdn.net/qq_21763381/article/details/83242916 首先分清楚主计算 ...

  5. ts 学习笔记 - 类

    目录 类 类的概念 类的用法 属性和方法 类的继承 存取器 静态属性 Typescript 中的用法 抽象类 类的类型 类与接口 类实现接口 接口继承接口 接口继承类 混合类型 类 类的概念 类 (c ...

  6. vant vue 屏幕自适应

    手机端 pc端 屏幕自适应 一.新建 vue.config.js项目目录中没有 vue.config.js 文件,需要手动创建,在根目录中创建 vue.config.js const pxtorem ...

  7. mysql采坑笔记

    mysqld --initialize-insecure // 初始化数据 mysql -u root -p // 登录 navicat for mysql 1251错误解决方法 ALTER USER ...

  8. SaaS技术栈有多复杂？

    [特别声明:本文基于Tools and Services I Use to Run My SaaS进行修改.] 软件SaaS化由于需要考量架构的各个方面,所以需要的技术栈非常全面. 以一个客户管理Sa ...

  9. python编写DDoS攻击脚本

    python编写DDoS攻击脚本 一.什么是DDoS攻击 DDoS攻击就是分布式的拒绝服务攻击,DDoS攻击手段是在传统的DoS攻击基础之上产生的一类攻击方式.单一的DoS攻击一般是采用一对一方式的, ...

  10. 离线webpack创建vue 项目

    参考地址: https://blog.csdn.net/feinifi/article/details/104578546 画重点: // 需要带上参数--offline表示离线初始化. --offl ...