DIV CSS 佈局教程網

7.3 jQuery鼠標事件
編輯:jQuery基礎知識     

鼠標事件,指的是操作鼠標時觸發的事件。jQuery常見鼠標事件如下:

jQuery鼠標事件 鼠標事件 說明 click 鼠標單擊事件 dbclick 雙擊事件 mouseover 移入事件 mouseout 移出事件 mousemove 移動事件 mousedown 按下事件 mouseup 松開事件

從上面這個表, 我們可以發現: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標簽這類的按鈕。小伙伴們要非常清楚這一點。

此外還需要記住一點:任何元素我們都可以為它添加單擊事件!

二、鼠標移入和移出事件

1、mouseover和mouseout

在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個操作,我們就可以使用像上面這種“鏈式操作”的方式。

2、mouseenter和mouseleave

在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動畫”這一章中我們會詳細講解,這裡大家了解一下即可。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved