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中的事件(一) ...
随机推荐
- Single-stack real-time operating system for embedded systems
A real time operating system (RTOS) for embedded controllers having limited memory includes a contin ...
- 使WPF程序应用预置的控件风格, 如Aero, Luna, Royale, Classic等
原文:使WPF程序应用预置的控件风格, 如Aero, Luna, Royale, Classic等 WPF预设有Aero, Classic, Luna, Royale主题, WPF程序会根据 ...
- 优秀开源项目之四：CrashRptProbe，查询程序奔溃的利器
1.背景: 在开发人员进行项目开发和调试代码时,有一个非常困扰的问题,就是程序在调试运行过程中会莫名其妙地异常退出.由于导致异常退出的问题非常多,因此在面对这种无任何提示的异常退出时,开发人员会非常无 ...
- mongodb与SQL对应关系表
1. select查询 mongodb使用find要么findOne要查询: find批量查询. findOne查询记录. find有两个参数: 查询条件. 第二个查询返回的字段. 以下是mongod ...
- [ 转]Node.js模块 require和 exports
什么是模块? node.js通过实现CommonJS的Modules/1.0标准引入了模块(module)概念,模块是Node.js的基本组成部分.一个node.js文件就是一个模块,也就是说文件和模 ...
- 图形化界面安装oracle报错Could not execute auto check for display colors using command /usr/bin/xdpyinfo. Check if the DISPLAY variable is set.
问题描述: 在Linux + oracle 安装时,采有root 帐号登录x-windows 界面,然后 $su oracle 登录录安装Oracle 报以下错误: >>> Coul ...
- WCF Rest用法
GET GET单参数 服务器 [OperationContract] string GetOneParameter(string value); [WebInvoke(Method = "G ...
- NPOI在无Office环境下，对Office文件的操作
在做项目的时候,经常会遇到对 Office的操作,但有时候会没有Office环境,因此给大家介绍一个思路,在没有Office环境下,对Office的处理. NPOI,顾名思义,就是POI的.NET版本 ...
- 【Python】Camera拍照休眠唤醒测试
#!/usr/bin/python # -*- coding: UTF-8 -*- import os import sys import time rebootCount = int(input(& ...
- 腾讯QQ 8.9.3体验版发布 在线文档多端同步实时保存
感谢N软网的投递 腾讯体验中心迎来QQ8.9.3首个维护体验版发布,详细版本号为v8.9.3.21006,上一个体验版v8.9.2.20717发布于4月20日,时隔34天又迎来了更新.本次升级主要是在 ...