JQuery事件和動畫
網頁中的事件
和WinForm一樣，在網頁中的互動也是需要事件來實現的，例如tab切換效果，可以通過滑鼠單擊事件來實現
jQuery中的事件
jQuery事件是對JavaScript事件的封裝，常用事件分類
基礎事件；
滑鼠事件
鍵盤事件
window事件
表單事件
複合事件；
-
-
- 滑鼠游標懸停
- 滑鼠連續點選
-
滑鼠事件：
滑鼠事件是當用戶在文件上移動或單擊滑鼠時而產生的事件
示例：
滑鼠事件方法的區別
//區別是在於有沒有子元素
鍵盤事件
使用者每次按下或者釋放鍵盤上的鍵時都會產生事件，常用鍵盤事件
示例：
瀏覽器事件
語法：$(selector).resize( ); //resize 重新設定大小
調整視窗大小時，完成頁面特效
繫結事件與移除事件
繫結事件
移除事件
繫結事件
//對同一個時間操作都寫在一起，容易維護 符合規範
繫結單個事件
同時繫結多個事件
繫結單個事件：
示例;
使用繫結實現滑鼠移至“我的當當”顯示二級選單
$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});
繫結多個事件：
示例；
使用繫結多個事件實現“我的當當” 二級選單的顯示和隱藏
移除事件：
移除事件使用unbind()方法:
事件型別，主要包括：blur、focus、click、
mouseout等基礎事件，此外，還可以是自定義事件
語法：unbind([type],[fn])
提示: 當unbind()不帶引數時，表示移除所繫結的全部事件
示例：
$("#del").click(function(){
$("#nav li:first").unbind("click", content1)
});
複合事件
hover( )方法
toggle( )方法
hover()方法：
hover()方法相當於mouseover與mouseout事件的組合
語法：hover(enter,leave); //進入和離開
示例：
toggle()方法：
toggle()方法用於模擬滑鼠連續click事件
語法:
toggle(fn1,fn2,...,fnN);
示例
$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
toggle()方法不帶引數，與show( )和hide( )方法作用一樣
toggleClass( )可以對樣式進行切換
語法：toggle( );
示例：toggleClass(className);
語法：$("input").click(function(){$("p").toggle();})
示例：$("input").click(function(){$("p").toggleClass("red");})
小結
toggle( )和toggleClass( )總結
toggle( fn1,fn2...)實現單擊事件的切換，無須額外繫結click事件
toggle( )實現事件觸發物件在顯示和隱藏狀態之間切換
toggleClass( )實現事件觸發物件在載入某個樣式和移除某個樣式之間切換
jQuery動畫效果
jQuery提供了很多動畫效果
控制元素顯示與隱藏
改變元素的透明度
改變元素高度
自定義動畫
控制元素的顯示及隱藏
show() 控制元素的顯示，hide( )控制元素的隱藏
$(selector).show([speed],[callback]) //slideDown
$(selector).hide([speed],[callback]) //slideUp
//speed，可選。表示速度，預設為“0”，可能值：
毫秒（如1000）、slow、normal、fast
//callback，可選。show函式執行完之後，要執行的函式
改變元素的透明度
fadeIn()和fadeOut()可以通過改變元素的透明度實現淡入淡出效果
語法:
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
//speed 可選。表示速度，預設為“0”，可能值：毫秒（如1000）
、slow、normal、fast
//callback 可選。show函式執行完之後，要執行的函式
改變元素的高度
slideDown() 可以使元素逐步延伸顯示
slideUp()則使元素逐步縮短直至隱藏
語法：$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback])
$(document).ready(function() {
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
});
自定義動畫
語法：$(selector). animate({params},speed,callback)
//params 必須，定義形成動畫的CSS屬性
//speed 速度
//callback 回撥函式
英雄難過棍子關:
示例:
/
