JQuery的属性与样式操作

开发工具与关键技术:JQuer和MVC开发工具
作者:郑健鹏
撰写时间:2019年4月14日
这次我们来学习jQuery鼠标事件,如果要使用这些事件,第一步是应用Jquery插件,第二步是绑定要使用这些事件所使用的元素,比如按钮之类的,这里的演示就绑定了按钮,当鼠标点击,移入和移除会触发一些绑定的事件
jQuery鼠标事件
     jQuery鼠标事件列表:
     click 单击事件 dbclick 双击事件
     mousedown 鼠标按下事件 mouseup鼠标弹起事件
     mouseenter 鼠标进入事件 mouseleave 鼠标离开事件
 jQuery鼠标事件之click与dbclick事件
     click([[data], fn])
 参数说明:fn 在每一个匹配元素的click事件中绑定的处理函数。
     data:click([Data], fn) 可传入data供函数fn处理。
     fn:在每一个匹配元素的click事件中绑定的处理函数。
     dblclick([[data],fn]) 参数说明同上
1·第一个按钮的点击事件:这是鼠标的单击事件
    $("button:eq(0)").click(function () {
        alert("jQuery鼠标事件之鼠标单击事件");
    });
2·第二个按钮的dblclick事件:这是鼠标的双击事件
    $("button").eq(1).dblclick(function () {
        alert("jQuery鼠标事件之鼠标双击事件");
    });
3·第三个按钮的mousedown事件:这是鼠标的按下事件
    $("button").eq(2).mousedown(function () {
        alert("jQuery鼠标事件之鼠标按下事件");
    });
4·第四个按钮的mouseup事件:这是鼠标的弹起事件
    $("button").eq(3).mouseup(function () {
        alert("jQuery鼠标事件之鼠标弹起事件");
    });
5·第五个按钮的mouseover事件:这是鼠标的移入事件
    $("button").eq(4).mouseover(function () {
        alert("jQuery鼠标事件之鼠标移入事件");
    });
6·第六个按钮的mouseover事件:这是鼠标的移出事件
    $("button").eq(5).mouseout(function () {
        alert("jQuery鼠标事件之鼠标移出事件");
    });
jQuery鼠标事件之hover事件
    hover([over,]out)
        一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
        参数说明:
        over,out:
            over:鼠标移到元素上要触发的函数
            out:鼠标移出元素要触发的函数
        out
        当鼠标移到元素上或移出元素时触发执行的事件函数
    $(".divContent").hover(
        function () {//hover的第一个函数:鼠标移入的时候触发事件
            $(this).addClass("changeColor");//添加一个类
        },
        function () {//hover的第二个函数:鼠标移出的时候触发事件
            $(this).removeClass("changeColor");//移除类
        });
下面是效果图

JQuery的属性与样式操作