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