jQuery滑鼠事件匯總

標籤：height   slide   ide   使用   his   button   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 );

 

jQuery滑鼠事件匯總