鼠標事件,指的是操作鼠標時觸發的事件。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動畫”這一章中我們會詳細講解,這裡大家了解一下即可。