jQuery入门——注册事件
下面举例介绍注册事件的几种方法:
以光棒效果为例
1.bind注册:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.hover{
background: #e8e8e8;
}
</style>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li').bind({
mouseover:function(){
$(this).css('background','#e8e8e8')
},
mouseout:function(){
$(this).css('background','')
}
})
//j卸载事件
//$('li').unbind('mouseover mouseout')
});
</script>
</head>
<body>
<ul>
<li>第一个光棒</li>
<li>第二个光棒</li>
<li>第三个光棒</li>
</ul>
</body>
</html>
2.on注册:
$(document).ready(function(){
$('li').on({
mouseover:function(){
$(this).css('background','#e8e8e8')
},
mouseout:function(){
$(this).css('background','')
}
})
//$('li').off()
});
3.使用.hover模仿悬停事件:
$(document).ready(function(){
var handlerInOut = function(){
$(this).toggleClass('hover');
}
//以下两种写法效果相同
//$('li').on( "mouseover mouseout", handlerInOut);
$('li').hover(handlerInOut)
});
jQuery入门——注册事件的更多相关文章
- jQuery入门（3）事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JQuery的事件委托；jQuery注册事件；jQuery事件解绑
一.事件 ①事件委托:就是给子元素的父元素或者祖先元素注册一个事件,但是事件的执行者是子元素,委托事件的好处是能够给动态创建出来时元素也加上事件. ②简单事件:就是给自己注册事件自己执行动态创建出来的 ...
- Jquery中bind(), live(), on(), delegate()四种注册事件的优缺点，建议使用on（）
jquery中注册的事件,注册事件很容易理解偏差,叫法不一样.我第一反应就是如何添加事件,使用onclick之类的,暂时不讨论js注册事件的方法. 也看到园内前辈写过相关的帖子,但不是很详细,我找到了 ...
- jquery click嵌套 事件重复注册 多次执行的问题
jquery click嵌套 事件重复注册 多次执行的问题 上面只是参考,我自己的解决方法是先使用unbind("click")解除事件然后再绑定新事件: $("#tes ...
- 【转】jquery 注册事件的方法
原文链接:http://outofmemory.cn/code-snippet/2123/jquery-zhuce-event-method 1.使用事件名来绑定,可用的事件名有 change,cli ...
- 使用jquery的on方法注册事件遇到的坑
1,使用on注册事件 $(selector).on(event,childSelector,data,function) 2,$(selector)中的selector可以是document,那么意味 ...
- JQuery入门
JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- jQuery：详解jQuery中的事件（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
随机推荐
- 使用WPF实现3D场景[二]
原文:使用WPF实现3D场景[二] 在上一篇的文章里我们知道如何构造一个简单的三维场景,这次的课程我将和大家一起来研究如何用代码,完成对建立好了的三维场景的观察. 首先看一下DEMO的界面: ...
- golang中jwt使用
golang 中jwt使用方式总结. 1. golang示例代码 import ( "fmt" "time" "github.com/dgrijalv ...
- HDU 4279 Number(2012天津网络游戏---数论分析题)
转载请注明出处:http://blog.csdn.net/u012860063? viewmode=contents 题目链接:pid=4279">http://acm.hdu.edu ...
- OpenGL（十六） 鼠标、键盘交互响应事件
OpenGL中通过鼠标和键盘跟程序交互的实现需要实现注册鼠标和键盘响应事件,在一定条件下,该事件被触发,事件里的程序被执行,达到交互的目的. 通过glutMouseFunc(&OnMouse) ...
- WPF 自定义的图表（适用大量数据绘制）
原文:WPF 自定义的图表(适用大量数据绘制) 在WPF中绘制图表比较简单,有很多的第三方控件,但是在绘制大量数据的时候,就显得有些吃力,即便是自己用StreamGeometry画也达不到理想的效果, ...
- bigdata_ Kafka集群模式部署
环境:kafka 0.8.1.1 基本概念 Kafka维护按类区分的消息,称为主题(topic) 生产者(producer)向kafka的主题发布消息 消费者(consumer)向主题注册,并且接收发 ...
- 在WPF中实现图片一边下载一边显示
原文 在WPF中实现图片一边下载一边显示 当我们上网查看一个较大的图片时,浏览器能一边下载一边显示,这样用户体验是比较好的,但在WPF程序中,当我们通过如下方式显示一幅图片时: img.Source ...
- tensorflow 1.0 学习：模型的保存与恢复
将训练好的模型参数保存起来,以便以后进行验证或测试,这是我们经常要做的事情.tf里面提供模型保存的是tf.train.Saver()模块. 模型保存,先要创建一个Saver对象:如 saver=tf. ...
- SQL Server 事务复制分发到订阅同步慢
原文:SQL Server 事务复制分发到订阅同步慢 最近发现有一个发布经常出现问题,每几天就出错不同步,提示要求初始化.重新调整同步后,复制还是很慢!每天白天未分发的命令就达五六百万条!要解决慢的问 ...
- Android零碎知识之Style and Theme
Android的styles资源文件中存在了我们在应用中定义的各种style,它们都是以style开始的元素,包含许多属性的集合.但我们一般般它们分为style和theme,那它们有什么区别呢? 一. ...