zoukankan      html  css  js  c++  java
  • jQuery鼠标事件汇总

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。

    1、click事件:点击鼠标左键时触发

      $('p').click(function(){});

    示例:

    $('p').click(function(){
            alert('click function is running !');
           });

    2、dbclick事件:迅速连续的两次点击时触发

      $('p').dbclick(function(){});

    示例:

    $("button").dblclick(function(){
     $("p").slideToggle();
    });

    3、mousedown事件:按下鼠标时触发

      $('p').mousedown(function(){});

    示例

    1 $("button").mousedown(function(){
    2  $("p").slideToggle();
    3 });

    4、mouseup事件:松开鼠标时触发

      $('p').mouseup(function(){});

    示例:

    1 $("button").mouseup(function(){
    2  $("p").slideToggle();
    3 });

    5、mouseover事件:鼠标从一个元素移入另一个元素时触发

      mouseout事件:鼠标移出元素时触发

      $('p').mouseover(function(){});

      $('p').mouseout(function(){});

    示例:

    1 $("p").mouseover(function(){
    2  $("p").css("background-color","yellow");
    3 });
    4 $("p").mouseout(function(){
    5  $("p").css("background-color","#E9E9E4");
    6 });

    6、mouseenter事件:鼠标移入元素时触发

         mouseleave事件:鼠标移出元素时触发

      $('p').mouseenter(function(){});

      $('p').mouseleave(function(){});

    示例

    1 $("p").mouseenter(function(){
    2  $("p").css("background-color","yellow");
    3 });
    4 $("p").mouseleave(function(){
    5  $("p").css("background-color","#E9E9E4");
    6 });

    7、hover事件

      $('p').hover(
        function(){},
        function(){}
      );

    示例

    1 $(".table_list tr").hover(
    2 function () {
    3 $(this).addClass("hover");
    4 },
    5 function () {
    6 $(this).removeClass("hover");
    7 }
    8  
    9 );
     

    8、toggle事件:鼠标点击切换事件

      $('p').toggle(
        function(){},
        function(){}
      );

    示例

    1 $("p").toggle(
    2  function(){
    3  $("body").css("background-color","green");},
    4  function(){
    5  $("body").css("background-color","red");},
    6  function(){
    7  $("body").css("background-color","yellow");}
    8 );

  • 相关阅读:
    P2149 [SDOI2009]Elaxia的路线
    P1346 电车
    P3174 [HAOI2009]毛毛虫
    P3047 [USACO12FEB]附近的牛Nearby Cows
    P4053 [JSOI2007]建筑抢修
    P2607 [ZJOI2008]骑士
    [HNOI2006]马步距离
    [POI2014]Hotel
    [BZOJ3856]Monster
    [BZOJ2819]Nim
  • 原文地址:https://www.cnblogs.com/The-second/p/6088463.html
Copyright © 2011-2022 走看看