jQuery中有关mouse的事件--mousedown/up/enter/leave/over/out----2017-05-10
mousedown:鼠标按下才发生
mouseup:鼠标按下松开时才发生
mouseenter和mouseleave效果和mouseover mouseout效果差不多;但存在区别,区别见代码解析:
css代码:
<style>
.cc,.dd{
height: 80px;
width: 300px;
border: 1px solid black;
}
.ff,.ee{
height: 200px;
width: 300px;
background-color: darkgrey;
border:1px solid red;
text-align: center;
}
</style>
html代码:
<body> <div class="aa">1、please press down your mouse button</div><br />
<div class="bb">2、please press up your mouse button</div><br /> <div class="cc"> 3、mouseenter:颜色变红
mouseleave:颜色变灰 </div><br /> <div class="dd">
4、mouseover:颜色变黄
mouseout:颜色变灰
</div><br /> <div class="ff"> 5、<p style="background-color: white;">mouseout事件在鼠标离开任意一个子元素及选的元素时触发</p><span></span> </div><br />
<div class="ee"> 6、<p style="background-color: white;">mouseleave事件只在鼠标离开选取的的元素时触发。</p><span></span> </div>
</body>
jqery代码:
<script>
//当鼠标按下时会显示
$(".aa").mousedown(function(){
$(this).after("<p>when mouse button press down</p>")
});
//当鼠标按下松开时发生的
$(".bb").mouseup(function(){
$(this).after("<p>when mouse button press up</p>")
});
//当鼠标enter/leave
$(".cc").mouseenter(function(){
$(".cc").css("background-color","red")
});
$(".cc").mouseleave(function(){
$(".cc").css("background-color","grey")
});
//当鼠标mouseover/mouseout
$(".dd").mouseover(function(){
$(".dd").css("background-color","yellow")
});
$(".dd").mouseout(function(){
$(".dd").css("background-color","grey")
});
//mouseleave 与 mouseout 的区别
x=0;
y=0;
$(".ff").mouseout(function(){
$(".ff span").text(x+=1);
})
$(".ee").mouseleave(function(){
$(".ee span").text(y+=1);
})
//mouseenter,mouseover同理
//mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
//mouseenter 事件只在鼠标移动到选取的元素上时触发。
</script>
jQuery中有关mouse的事件--mousedown/up/enter/leave/over/out----2017-05-10的更多相关文章
- jQuery中ready与load事件
jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
- jquery中怎样防止冒泡事件
jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()
- JQuery中的对象和事件
一:JQuery 对象和 Dom 对象 在使用 JQuery 过程中,我们一般(也是绝大多数情况下,除非我们使用了第二个框架)只有两类对象,即:JQuery 对象和 Dom 对象.Dom 对象指的是普 ...
- jquery中ajax的相关事件汇总
Jquery ajax事件分类 (一) 局部事件 local events 局部事件:在单个Ajax请求对象中绑定的事件,每个 Ajax 请求对象能够依据须要绑定自己的局部事件 .局部事件仅仅会被那个 ...
- jQuery中四个绑定事件的区别 on,bind,live,delegate
1.jQ操作DOM元素的绑定事件的四种方式 jQ中提供了四种事件监听方式,bind.live.delegate.on,对应的解除监听的函数分别是unbind,die,undelegate, ...
- jQuery中ready与load事件的区别
1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...
- jQuery中两种阻止事件冒泡的区别
方式一:event.stopPropagation(); 方式二:return false; 但是这两种方式是有区别的.return false 不仅阻止了事件往上冒泡,而且阻止了事件本身.event ...
- jQuery 中ready与load事件
jquey有3种针对文档加载的方法: //document ready $(document).ready(function(){ //...代码... }) //document ready 简写 ...
随机推荐
- Qt 动态加载DLL 常见错误有哪些?
1. dll 路径不对,比如 IE 中 2. 依赖库缺失,会报错找不到指定模块 注意: qt 的 qlibrary 只能加载 标准 C 函数
- Enum枚举写的一个简单状态机
今天下雨,心情有点压抑,所以用枚举写个状态机排解一下心情,顺便记录一下枚举使用方法. package statemachine; import java.util.ArrayList; import ...
- Web/app端自动化测试对比
Web/app端自动化测试 做了一段时间的Android自动化测试,对比个人之前做的web端自动化测试,有一些感想.(由于个人接触的时间也不是太久,很多东西理解也并不深刻,先写下菜鸟时期的感想.) 区 ...
- 自己编写的仿京东移动端的省市联动选择JQuery插件
概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...
- 给vmware的Linux虚拟机添加硬盘
给vmware的Linux虚拟机添加硬盘 1.先将虚拟机Power Off,在Virtual Machine Setting对话框里点击左下角的"Add",选择"Ha ...
- vxWorks驱动架构
Vxworks内核驱动基本结构: 三张表:1. 系统设备表 2. 系统驱动表 3. 文件描述符表 Vxworks 内部对每个设备使用DEV_HDR 数据结构进行表示: Typedef str ...
- WebService之CXF注解之四(测试类)
TeacherTest.java: /** * @Title:TeacherTest.java * @Package:com.test.service * @Description: * @autho ...
- 觉得OpenStack的网络复杂?其实你家里就有同样一个网络
当你想了解OpenStack的Neutron网络,打开下面这张图的时候,心里一定是崩溃的,看起来这些模块连在一起很复杂,但其实和你家里的网络很像,看不出来?看我来慢慢解析. 其实这个网络的样子更像是我 ...
- java暴力递归回溯算法
今天这个问题是我之前一直想解决的,还记得以前第一次上蓝桥杯的课的时候,也就是大一高数期中模拟考试那天,下午去上蓝桥杯课,遇到这道题,当时写了写,根本没有思路,然后就给大一的模拟考试去了.印象深刻啊,一 ...
- 关于工作中Git相关的总结
来公司一周多,主要是在熟悉各种环境和流程,而作为研发来讲,git的使用也是必不可少的.以前使用方式单一,几个人对着master,pull和push,来了之后发现其实在日常的开发中,git可以很方便的帮 ...