快捷導(dǎo)航

jQuery鼠標(biāo)事件匯總

更新時(shí)間：2015年08月30日 10:55:08 投稿：hebedich

鼠標(biāo)事件是指用戶在移動(dòng)鼠標(biāo)光標(biāo)或者點(diǎn)擊任意鼠標(biāo)鍵時(shí)觸發(fā)的事件,jQuery中封裝了基本上所有的鼠標(biāo)事件包括點(diǎn)擊,雙擊,移動(dòng)等鼠標(biāo)事件,下面我們就來(lái)看下這些事件的語(yǔ)法和用法

鼠標(biāo)事件是在用戶移動(dòng)鼠標(biāo)光標(biāo)或者使用任意鼠標(biāo)鍵點(diǎn)擊時(shí)觸發(fā)的。

1、click事件：點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)

　　$('p').click(function(){});

示例：

$('p').click(function(){
        alert('click function is running !');
       });

2、dbclick事件：迅速連續(xù)的兩次點(diǎn)擊時(shí)觸發(fā)

　　$('p').dbclick(function(){});

示例：

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

3、mousedown事件：按下鼠標(biāo)時(shí)觸發(fā)

　　$('p').mousedown(function(){});

示例

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

4、mouseup事件：松開(kāi)鼠標(biāo)時(shí)觸發(fā)

　　$('p').mouseup(function(){});

示例：

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

5、mouseover事件：鼠標(biāo)從一個(gè)元素移入另一個(gè)元素時(shí)觸發(fā)

　　mouseout事件：鼠標(biāo)移出元素時(shí)觸發(fā)

　　$('p').mouseover(function(){});

　　$('p').mouseout(function(){});

示例：

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

6、mouseenter事件：鼠標(biāo)移入元素時(shí)觸發(fā)

mouseleave事件：鼠標(biāo)移出元素時(shí)觸發(fā)

　　$('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事件：鼠標(biāo)點(diǎn)擊切換事件

　　$('p').toggle(
　　　　function(){},
　　　　function(){}
　　);

示例

$("p").toggle(
 function(){
 $("body").css("background-color","green");},
 function(){
 $("body").css("background-color","red");},
 function(){
 $("body").css("background-color","yellow");}
);

您可能感興趣的文章:

相關(guān)文章

jQuery下的幾個(gè)你可能沒(méi)用過(guò)的功能
用jQuery好久了，都做了兩個(gè)項(xiàng)目了。今兒晚上喝咖啡喝多了，這都兩點(diǎn)多了睡不著，給大家分享下我在項(xiàng)目中用到的一些用jQuery實(shí)現(xiàn)的一些比較好的功能。希望對(duì)一些新手有點(diǎn)用。。。高手們可以拍磚哈。。。。我頭很硬不怕疼。。。呵呵。
2010-08-08
jquery對(duì)Json的各種遍歷方法總結(jié)(必看篇)
下面就為大家?guī)?lái)一篇jquery對(duì)Json的各種遍歷方法總結(jié)(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
如何使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能
本篇文章是對(duì)使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-07-07
利用jQuery實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了利用jQuery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法,涉及jQuery插件jquery.kinMaxShow實(shí)現(xiàn)焦點(diǎn)圖的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-05-05
EasyUI中datagrid在ie下reload失敗解決方案
這篇文章主要介紹了EasyUI中datagrid在ie下reload失敗解決方案，結(jié)合網(wǎng)上搜集來(lái)的幾種方案，最終解決了這個(gè)問(wèn)題，分享給大家，希望對(duì)大家能夠有所幫助。
2015-03-03
jQuery實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單功能示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單功能,結(jié)合完整實(shí)例形式分析了jQuery實(shí)現(xiàn)級(jí)聯(lián)菜單的具體流程與操作方法,涉及jQuery表單及數(shù)組元素的遍歷及事件響應(yīng)處理技巧.非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2017-01-01
jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)方法設(shè)置簡(jiǎn)單，一個(gè)是服務(wù)器處理程序是返回json數(shù)據(jù)，另一種就是ajax發(fā)送設(shè)置的datatype設(shè)置為jsonp格式數(shù)據(jù)或json格式都可以。這篇文章對(duì)此進(jìn)行了實(shí)例介紹,需要的朋友可以參考下
2014-06-06
讓人印象深刻的10個(gè)jQuery手風(fēng)琴效果應(yīng)用
jQuery 是最流行的 JavaScript 開(kāi)發(fā)框架，它簡(jiǎn)化了 HTML 文檔遍歷，事件處理，動(dòng)畫(huà)以及 Ajax 交互，幫助 Web 開(kāi)發(fā)人員更快速的實(shí)現(xiàn)各種精美的界面效果
2012-05-05
jQuery Ajax之$.get()方法和$.post()方法
load()方法通常用來(lái)從Web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件，然而這并不能體現(xiàn)Ajax的全部?jī)r(jià)值。在項(xiàng)目中，如果需要傳遞一些參數(shù)給服務(wù)器中的頁(yè)面，那么可以使用$.get()或者$.post()方法（或者是后面要講解到的$.ajax方法）。
2009-10-10