jQuery鼠标事件汇总

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

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

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

示例:

?
1
2
3
$( 'p' ).click( function (){
         alert( 'click function is running !' );
        });

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

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

示例:

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

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

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

示例

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

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

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

示例:

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

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

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

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

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

示例:

?
1
2
3
4
5
6
$( "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(){});

示例

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

7、hover事件

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

示例

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

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

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

示例

?
1
2
3
4
5
6
7
8
$( "p" ).toggle(
  function (){
  $( "body" ).css( "background-color" , "green" );},
  function (){
  $( "body" ).css( "background-color" , "red" );},
  function (){
  $( "body" ).css( "background-color" , "yellow" );}
);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值