• jquery 鼠标事件汇总


    鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,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(){});

    示例

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

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

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

    示例:

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

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

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

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

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

    示例:

    $("p").mouseover(function(){
     $("p").css("background-color","yellow");
    });
    $("p").mouseout(function(){
     $("p").css("background-color","#E9E9E4");
    });
    
    

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

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

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

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

    示例

    $("p").mouseenter(function(){
     $("p").css("background-color","yellow");
    });
    $("p").mouseleave(function(){
     $("p").css("background-color","#E9E9E4");
    });
    

    7、hover事件

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

    示例

    $(".table_list tr").hover( 
    function () { 
    $(this).addClass("hover"); 
    }, 
    function () { 
    $(this).removeClass("hover"); 
    } 
    
    ); 

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

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

    示例

    $("p").toggle(
     function(){
     $("body").css("background-color","green");},
     function(){
     $("body").css("background-color","red");},
     function(){
     $("body").css("background-color","yellow");}
    );
  • 相关阅读:
    4/5邀请赛的选拔赛,闷声滚大粗
    4.5邀请赛的选拔赛,闷声滚大粗
    hdu3068&&hdu3294,回文串,Manacher算法
    hdu3068&&hdu3294,回文串,Manacher算法
    BC78,hdu5655,5656。%%%%CA娘
    BC78,hdu5655,5656。%%%%CA娘
    深度懵逼计算机系统。。。DataLab。。
    深度懵逼计算机系统。。。DataLab。。
    设置ecShop网店用户名和email均可登录
    ecshop新建增加独立页面的方法
  • 原文地址:https://www.cnblogs.com/shuiche/p/6657115.html
Copyright © 2020-2023  润新知