jQuery鼠標(biāo)事件匯總
鼠標(biāo)事件是在用戶移動鼠標(biāo)光標(biāo)或者使用任意鼠標(biāo)鍵點擊時觸發(fā)的。
1、click事件:點擊鼠標(biāo)左鍵時觸發(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事件:按下鼠標(biāo)時觸發(fā)
$('p').mousedown(function(){});
示例
$("button").mousedown(function(){ $("p").slideToggle(); });
4、mouseup事件:松開鼠標(biāo)時觸發(fā)
$('p').mouseup(function(){});
示例:
$("button").mouseup(function(){ $("p").slideToggle(); });
5、mouseover事件:鼠標(biāo)從一個元素移入另一個元素時觸發(fā)
mouseout事件:鼠標(biāo)移出元素時觸發(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)移入元素時觸發(fā)
mouseleave事件:鼠標(biāo)移出元素時觸發(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)點擊切換事件
$('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實現(xiàn)的橫向二級導(dǎo)航效果代碼
這篇文章主要介紹了jquery實現(xiàn)的橫向二級導(dǎo)航效果代碼,可實現(xiàn)鼠標(biāo)滑過導(dǎo)航出現(xiàn)下拉菜單切換的效果,非常簡潔自然,涉及jquery鼠標(biāo)hover事件及頁面元素樣式的動態(tài)改變技巧,需要的朋友可以參考下2015-08-08jQuery動態(tài)操作表單示例【基于table表格】
這篇文章主要介紹了jQuery動態(tài)操作表單,結(jié)合實例形式分析了jQuery針對table表格的數(shù)據(jù)添加、刪除、元素修改、提交等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12jQuery Validate插件ajax方式驗證輸入值的實例
下面小編就為大家分享一篇jQuery Validate插件ajax方式驗證輸入值的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12jquery validation驗證身份證號,護(hù)照,電話號碼,email(實例代碼)
jquery validation驗證身份證號,護(hù)照,電話號碼,email(實例代碼)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11jQuery中通過ajax調(diào)用webservice傳遞數(shù)組參數(shù)的問題實例詳解
本文通過實例給大家詳細(xì)介紹jQuery中通過ajax調(diào)用webservice傳遞數(shù)組參數(shù)的相關(guān)資料,需要的朋友可以參考下2016-05-05jQuery實現(xiàn)文件編碼成base64并通過AJAX上傳的方法
這篇文章主要介紹了jQuery實現(xiàn)文件編碼成base64并通過AJAX上傳的方法,涉及jQuery前臺使用FileReader對象編碼base64文件進(jìn)行ajax上傳及后臺php處理相關(guān)操作技巧,需要的朋友可以參考下2018-04-04Jquery 實現(xiàn)表格顏色交替變化鼠標(biāo)移過顏色變化實例
Jquery 實現(xiàn)表格顏色交替變化,點擊選中行,鼠標(biāo)移過顏色變化效果附演示代碼 ,喜歡的朋友可以參考下2013-08-08