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

成都創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站制作、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元浮山做網(wǎng)站,已為上家服務(wù),為浮山各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

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

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

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

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

1.ready() 文檔就緒事件

當(dāng) DOM（文檔對象模型） 已經(jīng)加載，并且頁面（包括圖像）已經(jīng)完全呈現(xiàn)時，會發(fā)生 ready 事件。

語法：

1.$(document).ready(function)

2.$().ready(function)

3.$(function)

示例：

$(document).ready(function(){

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

       $("p").slideToggle();

   });

});

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

2.blur() 失去焦點事件

當(dāng)元素失去焦點時發(fā)生 blur 事件。

語法：

$(selector).blur(function)

示例：

$(document).ready(function(){

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

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

   });

});

當(dāng)輸入域失去焦點的時候改變其顏色

3.change() 元素改變事件

當(dāng)元素的值發(fā)生改變時觸發(fā)Change事件

語法：

$(selector).change(function)

示例：

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

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

});

當(dāng)Class為field的元素值發(fā)生變化時 改變其背景顏色

4.click() 元素點擊事件

當(dāng)點擊元素時觸發(fā)click事件

語法：

$(selector).click(function)

示例：

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

當(dāng)button標(biāo)簽元素點擊的時候 p標(biāo)簽元素顯示隱藏

5.dbclick() 元素雙擊事件

當(dāng)元素雙擊時觸發(fā)dbclick事件

語法：

$(selector).dblclick(function)

示例：

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

當(dāng)button標(biāo)簽元素雙擊的時候 p標(biāo)簽元素顯示隱藏

6.error() 元素錯誤事件

當(dāng)元素遇到錯誤（沒有正確載入時）觸發(fā)error事件

語法：

$(selector).error(function)

示例：

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

當(dāng)圖像不存在，就用一段預(yù)定義文本替換它

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

當(dāng)元素獲得焦點時，觸發(fā)focus事件

語法：

$(selector).focus(function)

示例：

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

當(dāng)input元素獲得焦點時，改變它的背景顏色

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

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

keydown觸發(fā)按鍵按下事件 keyup觸發(fā)按鍵松開事件 keypress觸發(fā)按鍵按下并松開事件

語法：

$(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事件");
   })
})

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

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

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

語法：

$(selector).load(function)

示例：

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

10.unload() 用戶離開事件

當(dāng)用戶離開頁面時，會發(fā)生 unload 事件。

具體來說，當(dāng)發(fā)生以下情況時，會發(fā)出 unload 事件：

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

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

• 使用前進或后退按鈕

• 關(guān)閉瀏覽器

• 重新加載頁面

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

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

語法：

event.unload(function)

示例：

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

當(dāng)用戶離開頁面是彈出Goodbye!

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

當(dāng)調(diào)整瀏覽器窗口大小時 觸發(fā)resize事件

語法：

$(selector).resize(function)

示例：

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

對瀏覽器窗口大小調(diào)整進行計數(shù)

12.scroll() 元素滾動事件

當(dāng)用戶對元素進行滾動時，觸發(fā)scroll事件

語法：

$(selector).scroll(function)

示例：

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

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

});

對元素滾動進行計數(shù)

13.select() 文本選擇事件

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

語法：

$(selector).select(function)

示例：

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

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

14.submit 表單提交事件

當(dāng)表單提交時，觸發(fā)表單提交事件

該事件只適用于表單

語法：

$(selector).submit(function)

示例：

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

15.鼠標(biāo)事件

mousedown()鼠標(biāo)按下事件，

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

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

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

mouseout()鼠標(biāo)離開事件，

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

mouseup()鼠標(biāo)松開事件

語法：

$(selector).mousedown(function)

$(selector).mouseenter(function)

$(selector).mouseenter(function)

$(selector).mouseenter(function)

$(selector).mouseenter(function)

$(selector).mouseenter(function)

$(selector).mouseenter(function)

示例：

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

網(wǎng)站題目：jQuery基礎(chǔ)系列（二）---事件介紹(1)
文章起源：http://jinyejixie.com/article46/pgejeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、品牌網(wǎng)站設(shè)計、微信公眾號、網(wǎng)站改版、外貿(mào)建站、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)