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>

鼠标感应与hover方法

2.实现鼠标感应

在CSS中，通常利用:hover伪类来改变样式或应用单独样式。引入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()。

toggle方法的其他应用示例

受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鼠标事件有了更深入的理解。