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中的事件(一) ...
随机推荐
- 不积跬步无以至千里（C语言笔记）
第一章 初始C程序 1.C程序结构 简单来说,一个C程序就是由头文件和函数组成 头文件 一条编译预处理命令:作用是在对C程序进行正式编译 ...
- echarts学习（上）
echarts 学习之路 学习思路 初识echarts 编写自己的echarts图表 根据需求编写工作中的echarts图表[进阶篇] github地址:https://github.com/liso ...
- 带农历日历的DatePicker控件！Xamarin控件开发小记
原文:带农历日历的DatePicker控件!Xamarin控件开发小记 闲来无事开发了个日期选择控件,感兴趣的同学前往: https://github.com/MatoApps/Mato.DatePi ...
- 王立平--android这四个组成部分
Android中称为四大组件的为别为:Activity/Service/BroadCast Recevicer/Content provider Activity:activity是用户和应用程序交 ...
- Gradle 1.12 翻译——第九章 Groovy高速入口
由于时间.没办法,做笔记和翻译的同时,大约Gradle用户指南.本博客不再做相关的注意事项.而仅仅翻译和本出版物中未翻译章节. 有关其他章节翻译请注意Github该项目:https://github. ...
- 首个 C++ 编译器诞生 30 周年了，来听听 C++ 之父畅谈 C++
原文 http://www.iteye.com/news/31076 C++ 之父 Bjarne Stroustrup 在 cfront 诞生 30 周年的访谈. 整整30年前,CFront 1 ...
- WPF 4 DataGrid 控件（进阶篇二）
原文:WPF 4 DataGrid 控件(进阶篇二) 上一篇<WPF 4 DataGrid 控件(进阶篇一)>中我们通过DataGridTemplateColumn 类自定义编辑 ...
- DotNetBar for Windows Forms 14.0.0.3_冰河之刃重打包版原创发布
关于 DotNetBar for Windows Forms 14.0.0.3_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...
- 自绘LISTVIEW的滚动条(Delphi实现)
因项目需要准备对LISTVIEW的滚动条进行自绘.于是在网上搜了一下,问题没解决,却搜出一篇令人不愉快的帖子 .确实,那时候实力是不够的,但现在应该是没问题了,为这个目的才不断磨练自己的. LISTV ...
- 数据绑定（五）使用集合对象作为列表控件的ItemsSource
原文:数据绑定(五)使用集合对象作为列表控件的ItemsSource ItemsSource属性可以接收一个IEnumerable接口派生类的实例作为自己的值,ItemsSource里存放的是一条一条 ...