1.鼠標事件
eg：光棒效果
$(function () { $('li').mouseover(function () { //鼠標移過時 $(this).css('background','blue'); }).mouseout(function () { //鼠標移過后 $(this).css('background',''); }); });2.鍵盤事件
3.表單事件
eg：輸入框的文字顯示效果
// 查詢輸入框 $("input[name='search']").focus(function(){ $(this).val(""); }); $("input[name='search']").blur(function(){ $(this).val("請輸入要查詢的問題"); });4.綁定事件與移除事件
bind():綁定事件
01.綁定一個
$("input[name=event_1]").bind("click",function() { $("p").css("background-color","#F30");});02.綁定多個
$("input[name=event_1]").bind({mouseover: function () { $("ul").css("display", "none");},mouseout: function () { $("ul").css("display", "block");}});unbind([type],[fn]):移除事件
當unbind()不帶參數時，表示移除所綁定的全部事件
5. 復合事件
1.hover()方法
hover()方法相當于mouseover與mouseout事件的組合，用于模擬鼠標指針懸停事件
2.toggle()方法 （在j 1.7后就刪除，不建議使用）
toggle()方法用于模擬鼠標連續click事件
2.toggle()方法 （在j 1.7后就刪除，不建議使用）
toggle()方法用于模擬鼠標連續click事件
$("body").toggle(function () { }, //第一次點擊觸發function () { }, //第二次點擊觸發function () { } //第三次點擊觸發... //...);同時toggle()方法還有一個作用：切換元素可見狀態
$('input').toggle( function () { $('ul').toggle(); //是顯示的則隱藏，是隱藏的則顯示 }, function () { $('ul').toggle(); //是顯示的則隱藏，是隱藏的則顯示 } );二：動畫
1.顯示及隱藏元素
show() 在顯示元素時，能定義顯示元素時的效果，如顯示速度
$(".tipsbox").show("slow");//以較慢的速度顯示元素hide() 隱藏元素
$(".tipsbox").hide("slow");//以較慢的速度隱藏元素這里補充一個is()方法的使用，可以用來判斷是顯示還是隱藏。
eg：
$('input').bind('click', function () { if ($(this).is(':visible')) {//如果內容為顯示 $(this).hide(); } else { $(this).show(); } })2.切換元素可見狀態（toggle()）
toggle()除了可以模擬鼠標的連續單擊事件外，還能用于切換元素的可見狀態
$("li:gt(5):not(:last)").toggle();//是隱藏則顯示，是顯示則隱藏3.淡入淡出效果
fadeIn()和fadeOut()可以通過改變元素的透明度實現淡入淡出效果
$("input[name=fadein_btn]").click(function(){ $("img").fadeIn("slow"); //以較慢的速度淡入});$("input[name=fadeout_btn]").click(function(){ $("img").fadeOut(1000); //以1000毫秒的速度淡出});4.改變元素的高度
slideDown() 可以使元素逐步延伸顯示，slideUp()則使元素逐步縮短直至隱藏
$("h2").click(function(){ $(".txt").slideUp("slow"); $(".txt").slideDown("slow");});三：自定義動畫
詳情 點擊 深入理解jquery自定義動畫animate()
你一定會有所收獲的！
以上這篇深入理解jquery中的事件與動畫就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
