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