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中的学习中为了能使让页面以 ...
随机推荐
- 解决Git Clone速度过慢的方法
Git Clone速度慢,原因很简单,默认的源是国外的,只需要使用国内源,速度就起飞了(当然,也没有太快,至少可以忍受了).使用方法很简单,在clone某个项目的时候将github.com替换为git ...
- React事件绑定的方式
一.是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends React.Compo ...
- pagehelper插件使用时查询不到数据
刚用mybatis 的分页插件时,老项目中分页封装的分页类起始为( pageno-1)* pagesize 于是直直接在pagehelper.start(start,pagesize)来进行分页.结 ...
- JavaScript学习笔记：你必须要懂的原生JS（一）
1.原始类型有哪几种?null是对象吗?原始数据类型和复杂数据类型存储有什么区别? 原始类型有6种,分别是undefined,null,bool,string,number,symbol(ES6新增) ...
- 创建函数function
1.创建普通函数 function 函数名称(){ 函数体://封装的代码 } 函数名称()://调用函数 function getSum(){ for(var i=1,sum=0;i<=100 ...
- 网络编程之TCP客户端开发和TCP服务端开发
开发 TCP 客户端程序开发步骤 创建客户端套接字对象 和服务端套接字建立连接 发送数据 接收数据 关闭客户端套接字 import socket if __name__ == '__main__': ...
- JMeter（1）-介绍+环境+安装+使用
一.开发接口测试案例的整体方案: 分析出测试需求,并拿到开发提供的接口说明文档: 从接口说明文档中整理出接口测试案例(包括详细的入参和出参数据以及明确的格式和检查点). 和开发一起对评审接口测试案例 ...
- 智能合约审计-不安全的delegatecall
简介 当合约A以delegatecall方式调用时, 相当于将外部合约B的func()代码复制过来 (其函数中涉及的变量或函数都需要在本地存在), 在合约A上下文空间中执行. 合约 pragma so ...
- Java 执行控制流程
1.带标签的break会中断并跳出标签所指的循环: 2.带标签的continue会中断本次循环,并开始标签所指处循环的下一轮循环.
- 热血动漫番太好看了！用Python爬取了1T的动漫，内存都爆了
最近被室友安利热血动漫番<终末的女武神>和<拳愿阿修罗>,太上头了周末休息熬夜看完了.不过资源不太好找,辣条一怒爬取了资源,这下可以看个够了.室友崇拜连连,想起了我的班 ...