jQuery实现单击和鼠标感应事件
更新时间：2015年02月01日 16:01:29 投稿：hebedich
这篇文章主要介绍了jQuery实现单击和鼠标感应事件的方法的相关资料,需要的朋友可以参考下
1.实现单击事件动态交替
之前我们讲到了toggleClass()，对于单击事件而言，jQuery同样提供了动态交替的toggle()方法，这个方法接受两个参数，两个参数均为监听函数，在click事件中交替使用。
例子：点击事件的动态交互。
复制代码 代码如下:
<script type="text/javascript">
$(function() {
$("#ddd").toggle(
function(oEvent) {
$(oEvent.target).css("opacity", "0.5");
},
function(oEvent) {
$(oEvent.target).css("opacity", "1.0");
}
);
});
</script>
<div id="ddd">11</div>
2.实现鼠标感应
在css中可以利用:hover伪类实现样式的改版，实现单独的css样式，在jQuery引入后，几乎所有的元素都可以用hover()来感应鼠标。并且可以制作更复杂的效果。其本质是mouseover和mouseout事件的合并
hover(over,out)方法可接受两个参数，均为函数。第一个是鼠标移动到元素上面触发，第二个是鼠标移出元素时触发。
复制代码 代码如下:
<script type="text/javascript">
$(function() {
$("#ddd").hover(
function(oEvent) {
//第一个函数相当于mouseover事件监听
$(oEvent.target).css("opacity", "0.5");
},
function(oEvent) {
//第二个函数相当于mouseover事件监听
$(oEvent.target).css("opacity", "1.0");
}
);
});
</script>
<div id="ddd">11</div>
与第一个例子相比，只是把toggle()换成了hover().
受wenzi0_0指导，写几个关于toggle()的小例子
1.常规的应用
复制代码 代码如下:
<script type="text/javascript">
$(function() {
$("#ddd").click(function(){
$("#eee").toggle();
});
});
</script>
<div id="ddd">11</div>
<div id="eee">122</div>
2.css属性
复制代码 代码如下:
<script type="text/javascript">
$(function(){
$("#eee").toggle(function() {
$("#ddd").css("background-color", "green");
},
function() {
$("#ddd").css("background-color", "red");
},
function() {
$("#ddd").css("background-color", "yellow");
}
);
});
</script>
<div id="ddd">11</div>
<div id="eee">122</div>
本文就先到这里了，小伙伴们是否对jQuery鼠标事件有新的认识了呢，希望小伙伴们能够喜欢。
相关文章
jquery的ajax提交form表单的两种方法小结(推荐)
下面小编就为大家带来一篇jquery的ajax提交form表单的两种方法小结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考2016-05-05
jQuery+easyui中的combobox实现下拉框特效
这篇文章主要介绍了jQuery+easyui中的combobox实现下拉框特效的几种方法，非常简单实用,需要的朋友可以参考下2015-02-02
本篇文章主要是对jQuery实现下拉框左右选择的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
这篇文章主要介绍了jQuery Ajax实现Select多级关联动态绑定数据的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
本文主要是记录一个项目中用到的对输出的json进行格式化的小技巧，也是看到一位朋友分享的，这里mark一下，有需要的小伙伴也可以参考下。2014-11-11
JQuery中$.ajax()方法想必大家并不陌生吧，在本文将为大家介绍下其参数及应用示例，感兴趣的朋友不要错过2013-12-12
jquery next nextAll nextUntil siblings的区别介绍
在本文为大家详细介绍下jquery next nextAll nextUntil siblings的区别，感兴趣的朋友可以参考下2013-10-10
两个多选select(multiple左右)添加、删除选项和取值实例
这篇文章主要介绍了两个多选select(multiple左右)添加、删除选项和取值实例,使用jquery实现,需要的朋友可以参考下2014-05-05
下面小编就为大家带来一篇完美解决jQuery的hover事件在IE中不停闪动的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
Jquery中offset()和position()的区别分析
这篇文章主要介绍了Jquery中offset()和position()的区别,实例分析了offset()与position()的使用的技巧与区别,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
最新评论