jQuery(十二);事件绑定
一、bind()
bing()用来绑定事件,例如:
二、unbind()
unbind()用来解除事件的绑定。例如:
三、on()
on()方法用来绑定事件,例如:
四、off()
off()方法用来解除事件的绑定,例如:
注意:
建议用on()方法绑定事件,效率更高。
五、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件绑定</title>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 正常情况下的鼠标移入背景色变为灰色,移出时变为白色
// 鼠标移入
/* $("#menu li").mouseover(function(){
$(this).css("background-color","gray");
});
// 鼠标移出
$("#menu li").mouseout(function(){
$(this).css("background-color","white");
}); */ //bind()绑定事件
$("#menu li").bind("mouseover",function(){
$(this).css("background-color","gray");
});
$("#menu li").bind("mouseout",function(){
$(this).css("background-color","white");
}); // bind()绑定多个事件
/* $("#menu li").bind("click mouseover",function(){
$(this).css("background-color","gray");
}); */ // bind()绑定多个事件
/* $("#menu li").bind({
click:function(){$(this).css("background-color","#ccc");},
mouseover:function(){$(this).css("background-color","yellow");}
}); */ // 解除绑定事件
//$("#menu li").unbind(); // 解除所有的事件
//$("#menu li").unbind("click");// 只解除click事件,保留鼠标移入事件 // on()绑定事件
// 处理添加背景色效果
$("#menu").on("mouseover","li",{},function(){
$(this).css("background-color","#ccc");
});
$("#menu").on("mouseout","li",{},function(){
$(this).css("background-color","yellow");
}); // off()解除绑定
$("#menu").off("mouseout","li"); // 只移除moustout事件
});
</script>
</head>
<body>
<input type="button" value="添加" />
<ul id="menu">
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</ul>
</body>
</html>
jQuery(十二);事件绑定的更多相关文章
- 关于jQuery新的事件绑定机制on()的使用技巧
关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...
- jQuery 中的事件绑定
一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
Jquery中的事件绑定:$("#btn").bind("click",function(){ }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...
- jQuery新的事件绑定机制on()
浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理 ...
- jQuery中是事件绑定方式--on、bind、live、delegate
概述:jQuery是我们最常用的js库,对于事件的绑定也是有很多种,on.one.live.bind.delegate等等,接下来我们逐一来进行讲解. 本片文章中事件所带的为版本号,例:v1.7+为1 ...
- jQuery新的事件绑定机制on()示例应用
投稿:whsnow 字体:[增加 减小] 类型:转载 从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下 ...
- jQuery插件 -- 动态事件绑定插件jquery.livequery.js
http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...
- JQuery实现click事件绑定与触发方法分析
原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...
- jQuery三种事件绑定方式.bind(),.live(),.delegate()
.bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...
随机推荐
- java项目中显示图表:struts2整合jfreechart
需要的包: struts2-jfreechart-plugin-2.2.1.1.jar jfreechart-1.0.13.jar jcommon-1.0.17.jar 前台jsp页面中可以使用ifr ...
- django 自动化测试的故障排查
[问题背景] django使用mysql做为后台数据库.在使用django的自动化测试命令test时报如下错误 python3 manage.py test polls Creating test d ...
- [LeetCode] Contains Duplicate & Contains Duplicate II
Contains Duplicate Given an array of integers, find if the array contains any duplicates. Your funct ...
- c++中c_str()用法
string c="abc123"; ]; strcpy(d,c.c_str()); cout<<"c:"<<c<<endl ...
- 【Unity】3.3 用3ds Max 2015制作模型并将其导入到Unity
分类:Unity.C#.VS2015 创建日期:2016-04-05 一.常用三维软件简介 由于游戏引擎本身的建模功能相对较弱,无论是专业性还是自由度都无法同专业的三维软件相比,所以大多数游戏中的模型 ...
- 菜鸟学Java(十八)——异常
每个学编程的人在编程的过程中都会遇到各种异常.那么当我们遇到异常的时候该怎么处理呢?针对不同的异常我们又该采取什么具体的处理方式呢?这些问题在我开始学编程的很长一段时间里我都不太清楚,还好随着不断的学 ...
- Fluent UDF【6】:预处理命令
今天要讲的内容是关于C语言的预处理.搞清楚了这个,就可以分析UDF中的各种头文件源代码,从此写UDF不求人. 1 关于预处理 在UDF的各种头文件中(文件路径D:\Program Files\ANSY ...
- 【内核】linux2.6版本内核编译配置选项(一)
Linux 2.6.19.x 内核编译配置选项简介 作者:金步国 版权声明 本文作者是一位自由软件爱好者,所以本文虽然不是软件,但是本着 GPL 的精神发布.任何人都可以自由使用.转载.复制和再分发, ...
- 将map中的查询参数拼装到URL路径中
被调接口的URL路径: //被调接口url String apiUrl = "http://api.open.xxxxxx.com/implatform/interview/send?acc ...
- 在XSLT中输出内容带有CDATA的XML节点
http://www.cnblogs.com/jaxu/archive/2013/03/13/2956904.html **************************************** ...