鼠標事件，指的是操作鼠標時觸發的事件。jQuery常見鼠標事件如下：
從上面這個表， 我們可以發現：jQuery中的事件類型比普通的JavaScript事件類型少了“on”前綴。例如，鼠標單擊事件在jQuery中對應的是click()方法，而在JavaScript中對應的是onclick()。其實，jQuery所有事件都有這個特點。
jQuery鼠標事件語法如下（以click事件為例），我們都是往事件方法中插入一個匿名函數function(){}，語法形式很簡單：
雙擊事件dbclick很少用，這裡就不再啰嗦。下面我們給大家詳細介紹一下jQuery鼠標事件。
很多初學者誤以為只有表單按鈕才有鼠標單擊事件，其實在jQuery中，任何元素都可以添加單擊事件。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#btn
{
display:inline-block;
width:150px;
height:30px;
line-height:30px;
text-align:center;
color:White;
background-color:Orange;
font-weight:bold;
border-radius:3px;
cursor:pointer;
}
#btn:hover{background-color:#FF8D12;}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
alert("表單提交成功！");
});
})
</script>
</head>
<body>
<div id="btn">提交表單</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
在這裡，我們使用div元素模擬了一個按鈕，然後為按鈕添加單擊事件。在實際開發中，我們更傾向於使用div元素模擬各種表單按鈕，而不是使用input標簽這類的按鈕。小伙伴們要非常清楚這一點。
此外還需要記住一點：任何元素我們都可以為它添加單擊事件！
在jQuery中，對於鼠標的移入和移出事件，我們最常使用的是mouseover和mouseout。這2個事件經常都是配合使用的，分別控制鼠標的“移入”和“移出”2種狀態。例如在下拉菜單中，鼠標移入一級菜單時會顯示對應的二級下拉菜單，鼠標移出一級菜單時二級下拉菜單就會收起來。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
#wrapper
{
text-align:left;
display:inline-block;
width:300px;
border:1px solid silver;
}
h3
{
text-align:center;
padding:10px;
background-color:#F1F1F1;
border-bottom:1px solid gray;
}
h3:hover
{
background-color:#E1E1E1;
cursor:pointer;
}
p
{
padding:8px;
display:none;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("h3").mouseover(function () {
$("p").css("display","block");
});
$("h3").mouseout(function () {
$("p").css("display", "none");
});
})
</script>
</head>
<body>
<div id="wrapper">
<h3> 學習網簡介</h3>
<p> 學習網成立於2015年4月1日，是一個富有活力的技術學習網站。 學習網為廣大網絡工作者（網頁開發人員、站長等）提供各種精品教程以及最精華資料。 學習網跟其他垃圾采集站不一樣， 學習網中的每一個課程、每一篇文章，甚至每一個知識點，都凝聚了本人的最辛勤的汗水。多少日日夜夜，本人嘔心瀝血在一遍一遍地編輯，為的是給廣大網站愛好者提供最精華的知識。</p>
</div>
</body>
</html>
在浏覽器預覽效果如下：
當鼠標移入標題時，在浏覽器預覽效果如下：
分析：
這裡使用了mouseover和mouseout分別定義了鼠標的移入和移出事件。當鼠標移入標題的時，內容塊會顯示；當鼠標移出標題時，內容塊會隱藏。
$(function () {
$("h3").mouseover(function () {
$("p").css("display","block");
});
$("h3").mouseout(function () {
$("p").css("display", "none");
});
})
對於上面這段代碼，我們可以使用jQuery鏈式調用的方式：
$(function () {
$("h3").mouseover(function () {
$("p").css("display","block");
}).mouseout(function () {
$("p").css("display", "none");
});
})
我們在“jQuery復制節點”這一節已經接觸過鏈式調用的方式了。在jQuery中，如果“同一個”jQuery對象有N個操作，我們就可以使用像上面這種“鏈式操作”的方式。
在jQuery中，除了mouseover和mouseout之外，還有一組移入移出事件：mouseenter和mouseleave。
mouseenter事件在鼠標進入某個元素的時候就會觸發，這個跟mouseover事件相似。但是這兩者也有區別：mouseover事件在鼠標移入“所選元素及其後代子元素”時都會觸發；mouseenter事件只有鼠標移入“所選元素”才會觸發，如果鼠標僅僅移入“所選元素的後代子元素”的時候，並不會觸發。
mouseleave事件在鼠標移出某個元素的時候就會觸發，這個跟mouseout事件相似。但是這兩者也有區別：mouseout事件在鼠標移出“所選元素及其後代子元素”時都會觸發；mouseleave事件只有鼠標移出“所選元素”才會觸發，如果鼠標僅僅移入“所選元素的後代子元素”的時候，並不會觸發。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
div
{
display:inline-block;
width:200px;
padding:30px;
background-color:#F1F1F1;
}
.over{margin-bottom:20px;}
p{background-color:white;}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
var x = 0;
var y = 0;
$(function () {
$(".over").mouseover(function () {
$(".over span").text(x += 1);
});
$(".enter").mouseenter(function () {
$(".enter span").text(y += 1);
});
})
</script>
</head>
<body>
<div class="over">
<p>mouseover觸發個數：<span></span></p>
</div><br />
<div class="enter">
<p>mouseenter觸發個數：<span></span></p>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
在這個例子中，我們可以清楚地看到鼠標移入“所選元素”或者“所選元素的子元素”都會觸發mouseover事件，但是只有鼠標移入“所選”元素的時候才會觸發mouseenter事件。
在實際開發過程中，“mouseover和mouseout”與“mouseenter和mouseleave”這兩組移入移出事件並沒有多大區別，對於同樣一個效果，都可以實現。不過一般情況下，更傾向於使用“mouseover和mouseout”。
在jQuery中，鼠標的按下和松開事件分別是mousedown和mouseup。其中mousedown表示鼠標按下的一瞬間所觸發的事件，而mouseup表示鼠標松開的一瞬間所觸發的事件。當然我們都知道，對於鼠標來說，只有“按下”才有“松開”這一說。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
#wrapper
{
text-align:left;
display:inline-block;
width:300px;
border:1px solid silver;
}
h3
{
text-align:center;
padding:10px;
background-color:#F1F1F1;
border-bottom:1px solid gray;
}
h3:hover
{
background-color:#E1E1E1;
cursor:pointer;
}
p
{
padding:8px;
display:none;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("h3").mousedown(function () {
$("p").slideToggle();
});
})
</script>
</head>
<body>
<div id="wrapper">
<h3> 學習網簡介</h3>
<p> 學習網成立於2015年4月1日，是一個富有活力的技術學習網站。 學習網為廣大網絡工作者（網頁開發人員、站長等）提供各種精品教程以及最精華資料。 學習網跟其他垃圾采集站不一樣， 學習網中的每一個課程、每一篇文章，甚至每一個知識點，都凝聚了本人的最辛勤的汗水。多少日日夜夜，本人嘔心瀝血在一遍一遍地編輯，為的是給廣大網站愛好者提供最精華的知識。</p>
</div>
</body>
</html>
在浏覽器預覽效果如下：
當我們點擊標題的時候，會觸發mousedown事件，在浏覽器預覽效果如下：
分析：
在jQuery中，slideToggle()方法通過使用滑動效果（高度變化）來切換元素的可見狀態。在後面的“jQuery動畫”這一章中我們會詳細講解，這裡大家了解一下即可。