jQuery基礎系列（二）---事件介紹(1)

   最近比較公司比較忙碌，所以發博文有點少，以后會慢慢補上，請見諒

   什么事JQuery事件，JQuery事件其實是指你的一些操作，比如單機，雙擊，鼠標移入，鼠標移出等。對觸發這些事件使用不同的函數方法進行操作，合起來就叫做事件方法。

下面來講一講一些事件方法的語法和使用示例：

/*============下面是事件方法說明=====================================================================================*/

/*注：$(selector)為Jquery的選擇器，詳情請參考我的博文：jQuery基礎系列（一）---選擇器介紹*/

1.ready() 文檔就緒事件

當 DOM（文檔對象模型） 已經加載，并且頁面（包括圖像）已經完全呈現時，會發生 ready 事件。

語法：

1.$(document).ready(function)

2.$().ready(function)

3.$(function)

示例：

$(document).ready(function(){

   $(".btn1").click(function(){

       $("p").slideToggle();

   });

});

示例效果：當文檔就緒之后，點擊Class=btn1的元素可以控制<p>標簽的元素顯示或隱藏

2.blur() 失去焦點事件

當元素失去焦點時發生 blur 事件。

語法：

$(selector).blur(function)

示例：

$(document).ready(function(){

$("input").blur(function(){    

        $("input").css("background-color","#D6D6FF");  

   });

});

當輸入域失去焦點的時候改變其顏色

3.change() 元素改變事件

當元素的值發生改變時觸發Change事件

語法：

$(selector).change(function)

示例：

$(".field").change(function(){

   $(this).css("background-color","#FFFFCC");

});

當Class為field的元素值發生變化時 改變其背景顏色

4.click() 元素點擊事件

當點擊元素時觸發click事件

語法：

$(selector).click(function)

示例：

$("button").click(function(){
 $("p").slideToggle();
});

當button標簽元素點擊的時候 p標簽元素顯示隱藏

5.dbclick() 元素雙擊事件

當元素雙擊時觸發dbclick事件

語法：

$(selector).dblclick(function)

示例：

$("button").dblclick(function(){
 $("p").slideToggle();
});

當button標簽元素雙擊的時候 p標簽元素顯示隱藏

6.error() 元素錯誤事件

當元素遇到錯誤（沒有正確載入時）觸發error事件

語法：

$(selector).error(function)

示例：

$("img").error(function(){
    $("img").replaceWith("
       Missing p_w_picpath!
   ");
});

當圖像不存在，就用一段預定義文本替換它

7.focus() 元素焦點獲得事件

當元素獲得焦點時，觸發focus事件

語法：

$(selector).focus(function)

示例：

$("input").focus(function(){
 $("input").css("background-color","#FFFFCC");
});

當input元素獲得焦點時，改變它的背景顏色

8.keydown() keypress() keyup() 按鍵觸發事件

完整的keypress事件包含2部分 一部分是按鍵按下kendown() 一部分是按鍵松開keypress

keydown觸發按鍵按下事件 keyup觸發按鍵松開事件 keypress觸發按鍵按下并松開事件

語法：

$(selector).keypress(function)

$(selector).keydown(function)

$(selector).keyup(function)

示例：

$(document).ready(function(){
   $("input").keydown(function(){
       $(this).css("background","#FF0000");
   })
   $("input").keyup(function(){
       $(this).css("background","#000");
   })
   $("input").keypress(function(){
       alert("這是keypress事件");
   })
})

當按下按鍵的時候 input背景色為紅色 當松開背景色為黑色 當完成一次按鍵操作 觸發彈出事件

9.load() 元素加載完成事件

當指定的元素（及子元素）已加載時，會發生 load() 事件。

語法：

$(selector).load(function)

示例：

$("img").load(function(){
 $("div").text("Image loaded");
});

10.unload() 用戶離開事件

當用戶離開頁面時，會發生 unload 事件。

具體來說，當發生以下情況時，會發出 unload 事件：

• 點擊某個離開頁面的鏈接

• 在地址欄中鍵入了新的 URL

• 使用前進或后退按鈕

• 關閉瀏覽器

• 重新加載頁面

unload() 方法將事件處理程序綁定到 unload 事件。

unload() 方法只應用于 window 對象。

語法：

event.unload(function)

示例：

$(window).unload(function(){
 alert("Goodbye!");
});

當用戶離開頁面是彈出Goodbye!

11.resize() 窗口大小調整事件

當調整瀏覽器窗口大小時 觸發resize事件

語法：

$(selector).resize(function)

示例：

$(window).resize(function() {
 $('span').text(x+=1);
});

對瀏覽器窗口大小調整進行計數

12.scroll() 元素滾動事件

當用戶對元素進行滾動時，觸發scroll事件

語法：

$(selector).scroll(function)

示例：

$("div").scroll(function() {

    $("span").text(x+=1);

});

對元素滾動進行計數

13.select() 文本選擇事件

當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件。

語法：

$(selector).select(function)

示例：

$("input").select(function(){
 $("input").after(" Text marked!");
});

往文本域添加文本，以顯示出提示文本

14.submit 表單提交事件

當表單提交時，觸發表單提交事件

該事件只適用于表單

語法：

$(selector).submit(function)

示例：

$("form").submit(function(e){
 alert("Submitted");
});

15.鼠標事件

mousedown()鼠標按下事件，

mouseenter()鼠標進入（穿過元素事件），

mouseleave()鼠標離開元素事件，注釋：與 mouseout 事件不同，只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件。如果鼠標指針離開任何子元素，同樣會觸發 mouseout 事件。請看下面例子的演示。

mousemove()鼠標在元素中移動事件，

mouseout()鼠標離開事件，

mouseover()鼠標進入事件，注釋：與 mouseenter 事件不同，不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件。請看下面例子的演示。

mouseup()鼠標松開事件

語法：

$(selector).mousedown(function)

$(selector).mouseenter(function)

$(selector).mouseenter(function)

$(selector).mouseenter(function)

$(selector).mouseenter(function)

$(selector).mouseenter(function)

$(selector).mouseenter(function)

示例：

這里時間不多，就不做示例了，有興趣的童鞋可以自己操作試試琢磨琢磨，就當是作業吧