HTML-jQuery中的事件與動畫
網頁中的事件
和WinForm一樣，在網頁中的互動也是需要事件來實現的，例如tab切換效果，可以通過滑鼠單擊事件來實現
jQuery中的事件：
jQuery事件是對JavaScript事件的封裝，常用事件分類：
- 基礎事件：①滑鼠事件；②鍵盤事件；③window事件；④表單事件
- 複合事件：①滑鼠游標懸停；②滑鼠連續點選
滑鼠事件：
滑鼠事件是當用戶在文件上移動或單擊滑鼠時而產生的事件
|
方法 |
描述 |
執行時機 |
|
click( ) |
觸發或將函式繫結到指定元素的click事件 |
單擊滑鼠時 |
|
mouseover( ) |
觸發或將函式繫結到指定元素的mouseover事件 |
滑鼠指標移過時 |
|
mouseout( ) |
觸發或將函式繫結到指定元素的mouseout事件 |
滑鼠指標移出時 |
|
mouseenter( ) |
觸發或將函式繫結到指定元素的mouseenter事件 |
滑鼠指標進入時 |
|
mouseleave( ) |
觸發或將函式繫結到指定元素的mouseleave事件 |
滑鼠指標離開時 |
示例：
以mouseover( ) 【當滑鼠移過選單時】與mouseout( )【當滑鼠移出選單時】方法為例，實現導航選單
$(".nav-ul a").mouseover(function(){
$(this).css("background-color","#f01e28");
【使用mouseover事件使導航專案改變背景顏色】
});
$(".nav-ul a").mouseout(function(){
$(this).css("background-color","#ff2832");
【使用mouseout事件使導航專案還原背景顏色】
});
滑鼠事件方法的區別：
鍵盤事件：
使用者每次按下或者釋放鍵盤上的鍵時都會產生事件，常用鍵盤事件：
示例：
以鍵盤事件為例，實現按鍵時特效
$("[type=password]").keyup(function () { 【當釋放鍵盤時】
$("#events").append("keyup");
【append方法是在備選元素的結尾，結尾依然在所選元素的內部插入指定內容】
}).keydown(function (e) { 【當按下鍵盤時】
$("#events").append("keydown");
}).keypress(function () { 【向密碼框輸入字元時】
$("#events").append("keypress");
});
$(document).keydown(function (event) { 【event是個物件，代表了事件的一個狀態，其中包含了事件發生的元素，鍵盤按鍵的狀態】
if (event.keyCode == "13") { 【按回車鍵時】
alert("確認要提交麼？");
}
});
瀏覽器事件：
語法：$(selector).resize( );
調整視窗大小時，完成頁面特效
繫結事件：
bind(type,[data],fn);
type：事件型別，主要包括click、mouseover、mouseout等基礎事件，此外，還可以是自定義事件
data：可選函式
fn：處理函式
繫結單個事件：
示例：
$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});
繫結多個事件：
使用繫結多個事件實現“我的當當” 二級選單的顯示和隱藏
示例：
$(".top-m .on").bind({
mouseover:function(){ 【為mouseover繫結方法】
$(".topDown").show();
},
mouseout:function(){ 【為mouseout繫結方法】
$(".topDown").hide();
}
});移除事件：
移除事件使用unbind()方法
語法：unbind([type],[fn])
type：事件型別，主要包括：blur、focus、click、mouseout等基礎事件，此外，還可以是自定義事件
fn：處理函式
當unbind()不帶引數時，表示移除所繫結的全部事件
複合事件：
hover()方法：
hover()方法相當於mouseover與mouseout事件的組合
語法：hover(enter,leave);
示例：
$(".top-m .on").hover(function(){
$(".topDown").show(); 【游標移入時觸發】
},
function(){
$(".topDown").hide(); 【游標移出時觸發】
}
);
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( )方法作用一樣：
語法：toggle( );
示例：
$("input").click(function(){$("p").toggle();})toggleClass( )可以對樣式進行切換：
語法：toggleClass(className);
示例：
$("input").click(function(){$("p").toggleClass("red");})toggle( )和toggleClass( )總結：
- toggle( fn1,fn2...)實現單擊事件的切換，無須額外繫結click事件
- toggle( )實現事件觸發物件在顯示和隱藏狀態之間切換
- toggleClass( )實現事件觸發物件在載入某個樣式和移除某個樣式之間切換
jQuery動畫效果：
1. 控制元素顯示與隱藏
show() 控制元素的顯示，hide( )控制元素的隱藏
語法：
$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])
speed：可選。表示速度，預設為“0”，可能值：毫秒（如1000）、slow、normal、fast
callback：可選。show函式執行完之後，要執行的函式
2. 改變元素的透明度
fadeIn()和fadeOut()可以通過改變元素的透明度實現淡入淡出效果
語法：
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
3. 改變元素高度
slideDown() 可以使元素逐步延伸顯示
slideUp()則使元素逐步縮短直至隱藏
語法：
$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback])
4. 自定義動畫
語法：
$(selector). animate({params},speed,callback)
params：必須，定義形成動畫的CSS屬性
