jQuery鼠标事件汇总

鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件，有单击，双击，移入，移出等鼠标事件。
语法和用法如下：
1.hover([over,]out):模仿悬停事件的方法，当鼠标移动到一个元素的时候会触发第一个函数，移出这个元素时会触发第二个函数。
例如：鼠标悬停的表格加上特定的类

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

2.click([[data],fn]):鼠标单击事件
例如：触发页面内所有段落的点击事件

$("p").click();

3.dblclick([[data],fn])：当双击元素时，会发生 dblclick 事件。
例如：给页面上每个段落的双击事件绑上 “Hello World!” 警告框

$("p").dblclick( function () { alert("Hello World!"); });

4.mousedown([[data],fn])：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
例如：当按下鼠标按钮时，隐藏或显示元素：

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

5.mouseenter([[data],fn])：当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
例如：当鼠标指针进入（穿过）元素时，改变元素的背景色：

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

6.mouseleave([[data],fn])：当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
例如：当鼠标指针离开元素时，改变元素的背景色：

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

7.mousemove([[data],fn])：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标
例如：获得鼠标指针在页面中的位置：

$(document).mousemove(function(e){  $("span").text(e.pageX + ", " + e.pageY);});

8.mouseout([[data],fn])：当鼠标指针从元素上移开时，发生 mouseout 事件。

该事件大多数时候会与 mouseover 事件一起使用。
例如：当鼠标从元素上移开时，改变元素的背景色：

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

9.mouseover([[data],fn])：当鼠标指针位于元素上方时，会发生 mouseover 事件。
该事件大多数时候会与 mouseout 事件一起使用。
例如：当鼠标指针位于元素上方时时，改变元素的背景色：

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

10.mouseup([[data],fn])：当在元素上放松鼠标按钮时，会发生 mouseup 事件。

与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
例如：当松开鼠标按钮时，隐藏或显示元素：

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