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鼠标事件有新的认识了呢，希望小伙伴们能够喜欢。
相关文章
点击某个按钮，删除某条记录后，提示删除成功，然后刷新dialog。2013-03-03
这篇文章主要介绍了jQuery实现视频作为全屏幕背景的方法和示例，推荐给有相同需求的小伙伴2014-12-12
这篇文章主要介绍了jQuery新窗口打开外链接的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要内容是jQuery无刷新切换主题皮肤实例讲解，本文应用cookie记录用户所选择设置的主题皮肤样式，需要了解的朋友可以参考下2015-10-10
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
这篇文章主要介绍了jQuery实现鼠标滑过商品小图片上显示对应大图片功能,涉及jQuery事件响应、元素遍历及属性动态操作相关实现技巧,需要的朋友可以参考下2018-04-04
本文主要介绍了jQuery实现图片滑动效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
密码框提示文字的功能还是比较实用的，下面为大家介绍下使用jquery简单的实现下，喜欢的朋友可以参考下2013-08-08
input file样式修改以及图片预览删除功能详细概括（推荐）
这篇文章主要介绍了input file样式修改以及图片预览删除功能，input file 按钮改成自己想要的样式以及.图片预览功能的实现，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
这篇文章主要介绍了jQuery animate和CSS3相结合实现缓动追逐效果的相关资料,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了基于jquery实现的tab选项卡功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,并附带源码下载,需要的朋友可以参考下2019-06-06
最新评论