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中的事件(一) ...
随机推荐
- centos 6 防火墙开启端口无效问题
昨天尝试redis在centos的安装,配置文件都检查了,外网就是不能访问 #添加端口开启 $ iptables -A INPUT -p tcp --dport 6379 -j ACCEPT #保存配 ...
- tar.gz文件命名及压缩解压方法
tar.gz文件命名 tar是把文件打成一个包,并不压缩; gz是用gzip把打成包的.tar文件压缩; 所以成了一个.tar.gz的文件 压缩 # tar cvfz backup.tar.gz /x ...
- 解析Android的 消息传递机制Handler
1. 什么是Handler: Handler 网络释义"机械手.经理"意思,在Android它用于管理多个线程UI操作: 2. 为什么会出现Handler: 在Android里面的 ...
- 《Planet Earth II》观看笔记
carrion:n. 腐肉:臭尸:不洁之物 cub:n. 幼兽:不懂规矩的年轻人:chick; n. 小鸡:小鸟:少妇 herd:兽群: 1. 高频单词 terrain:n. [地理] 地形,地势:领 ...
- AntDesign Form表单字段校验的三种方式
1.使用getFieldDecorator的rules规则 最简单的方法就是使用getFieldDecorator中的rules验证.rules中定义校验规则,message为校验不通过时的提示文字. ...
- WPF中StringFormat的用法--显示特定位数的数字
原文:WPF中StringFormat的用法--显示特定位数的数字 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/art ...
- Android开源项目SlidingMenu本学习笔记（两）
我们已经出台SlidingMenu使用:Android开源项目SlidingMenu本学习笔记(一个),接下来再深入学习下.依据滑出项的Menu切换到相应的页面 文件夹结构: watermark/2/ ...
- 安装在谷歌axure小工具
下载插件 第一步 第二步 第三步 第四步 版权声明:本文博客原创文章.博客,未经同意,不得转载.
- SourceTree 免注册使用
sourcetree安装的时候,需要注册.但是这个注册需要FQ,所以我们需要绕过注册 1. 找到目录:C:\Users\用户\AppData\Local\Atlassian\SourceTree 2. ...
- 最简单的IdentityServer实现——Client
客户端控制台演示请求访问令牌,然后使用此令牌访问API 1.新建项目并添加引用 新建一个.net core的控制台程序IdentityServer.EasyDemo.Client 1 引用Iden ...