綁定事件

bind(type, data, fuc)

one(type, data, fuc) //只執行一次

常見事件類型

名稱含義blur失去焦點focus獲得焦點load加載resize重置大小scroll滾動unload卸載click點擊dblclick雙擊mousedown鼠標按下mouseup鼠標彈起mousemove鼠標移動mouseover鼠標懸停mouseout鼠標移走mouseenter鼠標移入mouseleave鼠標離開change內容改變select選中submit提交keydown有鍵按下keypress有鍵按下keyup有鍵彈起error有錯誤

判斷是否顯示

if($("#id").is(":visible")){ }else{ }

簡化綁定事件

$(this).mouseover(function(){ //代碼 })

Hover事件

hover(enter，leave)

光標移入，觸發第一個事件，光標移走，觸發第二個事件

$("#id").hover(function(){ //光標移入 },function(){ //光標移出 })

toggle事件

$("#id").toggle(function(){ //第一次點擊 },function(){ //第二次點擊 })$(this).toggle();? //表示顯示隱藏之間的切換 $(this).slideToggle();? //切換顯示 $(this).fadeTo(1000,0.5); //1000ms淡化到0.5透明度

阻止事件的冒泡event.stopPropagation()

阻止默認事件的發生event.preventDefault()

補充：可以通過return false；阻止默認事件。

獲取事件針對的對象event.target

獲取光標所在頁面的位置event.pageX() / event.pageY()

獲取鼠標按鍵類型event.which() 1左鍵2中鍵3右鍵

移除所有的綁定事件

$("#id").unbind("click") 或 $("#id").unbind();

移除指定的事件

$("#id").unbind("click",funName);

模擬觸發事件

$("#id").trigger("click"); 或 $("#id").click();

元素的顯示隱藏

$("#id").show();

$("#id").hide();

$("#id").show("slow"); //600ms? $("#id").show("normal"); //400ms $("#id").show("fast"); //200ms $("#id").hide("slow");?//600ms? $("#id").hide("normal");?//400ms $("#id").hide("fast");//200ms $("#id").show(1000);//1000ms?

元素的淡入淡出

$("#id").fadeIn(); $("#id").fadeOut();

元素延展出現或隱藏

$("#id").slideDown(); //顯示 $("#id").slideUp(); //隱藏

自定義動畫

animate(param,speed, callback);

$(this).animate({"left":"500px"},3000);? //三秒內，位置改變到指定地方 $(this).animate({"left":"+=500px"},3000);? //三秒內，位置改變500px $(this).animate({"left":"-=500px"},3000);? //三秒內，位置改變500px

總結

以上是生活随笔為你收集整理的jquery动态绑定事件的方法_Jquery绑定事件及动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。