網(wǎng)頁特效設(shè)計基礎(chǔ)第5章-jQuery中的事件處理和動畫效果

1、jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程（慕課版）劉剛 主編新一代信息技術(shù)“十三五”系列規(guī)劃教材 第5章 jQuery中的事件處理和動畫效果 本章要點： jQuery的工廠函數(shù) 頁面加載響應(yīng)事件 事件綁定 模擬用戶操作 事件冒泡 事件捕獲 事件對象 隱藏和顯示匹配元素 切換元素的可見狀態(tài) 淡入淡出動畫效果 滑動動畫效果 自定義動畫效果 人們常說“事件是腳本語言的靈魂”，事件使頁面具有了動態(tài)性和響應(yīng)性，如果沒有事件將很難完成頁面與用戶之間的交互。在傳統(tǒng)的 JavaScript 中內(nèi)置了一些事件響應(yīng)的方式，但是 jQuery 增強(qiáng)、優(yōu)化并擴(kuò)展了基本的事件處理機(jī)制。5.1 jQuery 中的事件處理 5.1

2、.1 頁面加載響應(yīng)事件 $(document).ready()方法是事件模塊中最重要的一個函數(shù)，它極大地提高了 Web 響應(yīng)速度。$(document)是獲取整個文檔對象，從這個方法名稱來理解，就是獲取就緒的文檔。 方法的書寫格式為：$(document).ready(function() /在這里寫代碼 ); 可以簡寫成：$().ready(function() /在這里寫代碼 ); 當(dāng)$()不帶參數(shù)時，默認(rèn)的參數(shù)就是 document，所以$()是$(document)的簡寫形式。 還可以進(jìn)一步簡寫成：$(function() /在這里寫代碼 ); 通過上面的介紹可以看出，在 jQuery

3、 中，可以使用$(document).ready()方法代替?zhèn)鹘y(tǒng)的 window.onload()方法，不過兩者之間還是有些細(xì)微的區(qū)別的，主要表示在以下兩方面。（1）在一個頁面上可以無限制地使用$(document).ready()方法，各個方法間并不沖突，會按照在代碼中的順序依次執(zhí)行。而 window.onload()方法在一個頁面中只能使用一次。（2）在一個文檔完全下載到瀏覽器時（包括所有關(guān)聯(lián)的文件，如圖片、橫幅等）就會響應(yīng) window.onload()方法。而$(document).ready()方法是在所有的 DOM 元素完全就緒以后就可以調(diào)用，不包括關(guān)聯(lián)的文件。5.1.2 jQue

4、ry 中的事件 只有頁面加載顯然是不夠的，程序在其他的時候也需要完成某個任務(wù)。比如鼠標(biāo)單擊（onclick）事件、敲擊鍵盤（onkeypress）事件以及失去焦點（onblur）事件等。 在不同的瀏覽器中事件名稱是不同的，例如，在IE瀏覽器中的事件名稱大部分都含有 on，例如 onkeypress()事件，但是在火狐瀏覽器卻沒有這個事件名稱，jQuery統(tǒng)一了所有事件的名稱。jQuery 中的事件如表 5-1 所示。表 5-1 jQuery 中的事件續(xù)表5.1.3 事件綁定 在頁面加載完畢時，程序可以通過為元素綁定事件完成相應(yīng)的操作。在 jQuery 中，事件綁定通常可以分為元素綁定事件、移除

5、綁定事件和綁定一次性事件處理 3 種情況。1bind 為元素綁定事件 在 jQuery 中，為元素綁定事件可以使用 bind()方法，該方法的語法結(jié)構(gòu)如下：bind(type,data,fn) type：事件類型，表 5-1（jQuery 中的事件）中所列舉的事件。data：可選參數(shù)，作為 event.data 屬性值傳遞給事件對象的額外數(shù)據(jù)對象。大多數(shù)的情況下不使用該參數(shù)。fn：綁定的事件處理程序。在 3.0 版本被廢棄使用。2unbind 移除綁定 在jQuery中，為元素移除綁定事件可以使用unbind()方法，該方法的語法結(jié)構(gòu)如下：unbind(type,data) type：可選參數(shù)

6、，用于指定事件類型。data：可選參數(shù)，用于指定要從每個匹配元素的事件中反綁定的事件處理函數(shù)。在 3.0 版本被廢棄使用。3one 綁定一次性事件處理 在 jQuery 中，為元素綁定一次性事件處理可以使用 one()方法。one()方法為每一個匹配元素的特定事件（如click）綁定一個一次性的事件處理函數(shù)。在每個對象上，這個事件處理函數(shù)只會被執(zhí)行一次。其他規(guī)則與 bind()函數(shù)相同。這個事件處理函數(shù)會接收到一個事件對象，可以通過它來阻止（瀏覽器）默認(rèn)的行為。如果既想取消默認(rèn)的行為，又想阻止事件起泡，這個事件處理函數(shù)必須返回 false。 該方法的語法結(jié)構(gòu)如下：one(type,data,f

7、n) type：用于指定事件類型。data：可選參數(shù)，作為 event.data 屬性值傳遞給事件對象的額外數(shù)據(jù)對象。fn：綁定到每個匹配元素的事件上面的處理函數(shù)。4on 綁定一次或多次事件處理 在 jQuery 中，為元素綁定一個或多個事件處理可以使用 on()方法。on()方法綁定事件處理程序到當(dāng)前選定的 jQuery 對象中的元素，在 jQuery 1.7 版本中添加了該方法。該方法的語法結(jié)構(gòu)如下：on(events,selector,data,fn) events：一個或多個用空格分隔的事件類型和可選的命名空間，如click事件。selector：可選參數(shù)。data：當(dāng)一個事件被觸發(fā)時

8、要傳遞 event.data 給事件處理函數(shù)。fn：該事件被觸發(fā)時執(zhí)行的函數(shù)。當(dāng) fn=false 時可以做一個函數(shù)的簡寫，返回值為 false。5off 移除一次或多次事件處理 在 jQuery 中，在選擇元素上移除一個或多個事件的事件處理函數(shù)時可以使用 off()方法，可以用 off() 方法移除用.on()綁定的事件處理程序，在 jQuery 1.7 版本中添加了該方法。該方法的語法結(jié)構(gòu)如下：off(events,selector,fn) events：一個或多個用空格分隔的事件類型和可選的命名空間，如click事件。selector：一個最初傳遞到.on()事件處理程序附加的選擇器。f

9、n：事件處理程序函數(shù)以前附加事件上，或特殊值 false。5.1.4 模擬用戶操作 在 jQuery 中提供了模擬用戶的操作觸發(fā)事件、模仿懸停事件和模擬鼠標(biāo)連續(xù)單擊事件 3 種模擬用戶操作的方法。1模擬用戶的操作觸發(fā)事件 在 jQuery 中一般常用 triggerHandler()方法和 trigger()方法來模擬用戶的操作觸發(fā)事件。例如，可以使用下面的代碼來觸發(fā) id 為 button 的按鈕的 click 事件。$(#button).trigger(click); TriggerHandler()方法的語法格式與 trigger()方法完全相同。所不同的是：triggerHandler

10、()方法不會導(dǎo)致瀏覽器同名的默認(rèn)行為被執(zhí)行，而 trigger()方法會導(dǎo)致瀏覽器同名的默認(rèn)行為的執(zhí)行。例如，使用 trigger()觸發(fā)一個名稱為 submit 的事件，同樣會導(dǎo)致瀏覽器執(zhí)行提交表單的操作。要阻止瀏覽器的默認(rèn)行為，只需要返回false。另外，使用 trigger()方法和 triggerHandler()方法還可以觸發(fā) bind()綁定的自定義事件，并且還可以為事件傳遞參數(shù)。2模仿懸停事件 模仿懸停事件是指模仿鼠標(biāo)指針移動到一個對象上面又從該對象上面移出的事件，可以通過 jQuery 提供的hover(over,out)方法實現(xiàn)。hover()方法的語法結(jié)構(gòu)如下：hover(

11、over,out) over：用于指定當(dāng)鼠標(biāo)指針在移動到匹配元素上時觸發(fā)的函數(shù)。out：用于指定當(dāng)鼠標(biāo)指針在移出匹配元素上時觸發(fā)的函數(shù)。 當(dāng)鼠標(biāo)指針移動到一個匹配的元素上面時，會觸發(fā)指定的第 1 個函數(shù)。當(dāng)鼠標(biāo)指針移出這個元素時，會觸發(fā)指定的第 2 個函數(shù)。而且，會伴隨著對鼠標(biāo)指針是否仍然處在特定元素中的檢測（例如，處在 div 的圖像中），如果是，則會繼續(xù)保持“懸停”狀態(tài)，而不觸發(fā)移出事件。5.1.5 事件捕獲與事件冒泡 事件捕獲和事件冒泡都是一種事件模型，DOM 標(biāo)準(zhǔn)規(guī)定應(yīng)該同時使用這兩個模型：首先事件要從 DOM樹頂層的元素到 DOM 樹底層的元素進(jìn)行捕獲，然后再通過事件冒泡返回到 DO

12、M 樹的頂層。 在標(biāo)準(zhǔn)事件模型中，事件處理程序既可以注冊到事件捕獲階段，也可以注冊到事件冒泡階段。但是并不是所有的瀏覽器都支持標(biāo)準(zhǔn)的事件模型，大部分瀏覽器默認(rèn)都把事件注冊在事件冒泡階段，所以 jQuery 始終會在事件冒泡階段注冊事件處理程序。1什么是事件捕獲與事件冒泡 圖 5-7、圖 5-8 和圖 5-9 展示了鼠標(biāo)指針在不同元素上懸停時的效果。圖 5-6 頁面結(jié)構(gòu) 圖 5-7 鼠標(biāo)指針懸停在 span 元素上的效果圖 5-8 鼠標(biāo)指針懸停在 p 元素上的效果 圖 5-9 鼠標(biāo)指針懸停在 div 元素上的效果 從上面的運行結(jié)果中可以看到，當(dāng)鼠標(biāo)指針在span元素上時，3個元素都被加上了紅色邊

13、框。說明在響應(yīng)span元素的mouseover事件的同時，其他兩個元素的mouseover事件也被響應(yīng)。觸發(fā)span元素的事件時，瀏覽器最先響應(yīng)的將是span元素的事件，其次是p元素，最后是div元素。在瀏覽器中事件響應(yīng)的順序如圖5-10所示。這種事件的響應(yīng)順序就叫做事件冒泡。事件冒泡是從DOM樹的頂層向下進(jìn)行事件響應(yīng)。 另一種相反的策略就是事件捕獲，事件捕獲是從DOM 樹的底層向上進(jìn)行事件響應(yīng)，事件捕獲的順序如圖5-11所示。圖 5-10 事件冒泡（由具體到一般） 圖 5-11 事件捕獲（由一般到具體）2事件對象 通常情況下，在不同瀏覽器中獲取事件對象是比較困難的。針對這個問題，jQuery

14、 進(jìn)行了必要的處理，使得在任何瀏覽器中都能輕松地獲取事件對象以及事件對象的一些屬性。 在程序中使用事件對象非常的簡單，只要為函數(shù)添加一個參數(shù)即可。 具體 jQuery 代碼如下：$(element).bind(mouseout,function(event) / event：事件對象 / 省略部分代碼 ) 當(dāng)單擊“element”元素時，事件對象就被創(chuàng)建，該事件對象只有事件處理函數(shù)才可以訪問到。事件處理函數(shù)執(zhí)行完畢后，事件對象就被銷毀了。3阻止事件冒泡 事件冒泡會經(jīng)常導(dǎo)致一些令開發(fā)人員頭疼的問題，所以必要的時候，需要阻止事件的冒泡。要解決這個問題，就必須訪問事件對象。事件對象提供了一個stop

15、Propagation()方法，使用該方法可以阻止事件冒泡。 阻止例 5-5 的程序的事件冒泡，可以在每個事件處理程序中加入一句代碼，例如：$(.test1).mouseover(function(event) $(.test1).addClass(redBorder); event.stopPropagation(); / 阻止冒泡事件 ); 由于 stopPropagation()方法是跨瀏覽器的，所以不必?fù)?dān)心它的兼容性。 添加了阻止事件冒泡代碼的例 5-5 的運行效果如圖 5-12 所示。 當(dāng)鼠標(biāo)指針在 span 元素上時，只有 span 元素被加上了紅色邊框，說明只有 span 元素響

16、應(yīng) mouseover 事件，程序成功阻止了事件冒泡。圖 5-12 阻止事件冒泡后的效果4阻止瀏覽器默認(rèn)行為 網(wǎng)頁中的元素有自己的默認(rèn)行為，例如，在表單驗證的時候，表單的某些內(nèi)容沒有通過驗證，但是在單擊了提交按鈕以后表單還是會提交。這時就需要阻止瀏覽器的默認(rèn)操作。在 jQuery 中，應(yīng)用 preventDefault()方法可以阻止瀏覽器的默認(rèn)行為。 在事件處理程序中加入下面代碼就可以阻止默認(rèn)行為：event. preventDefault () / 阻止瀏覽器默認(rèn)操作 如果想同時停止事件冒泡和瀏覽器默認(rèn)行為，可以在事件處理程序中返回 false。即：return false; / 阻止事件

17、冒泡和瀏覽器默認(rèn)操作 這是同時調(diào)用stopPropagation()和preventDefault()方法的一種簡要寫法。5事件對象的屬性 在 jQuery 中對事件屬性也進(jìn)行了封裝，使得事件處理在各大瀏覽器下都可以正常運行而不需要對瀏覽器類型進(jìn)行判斷。（1）event.type。（2）event.preventDefault()方法是阻止默認(rèn)的事件行為，event.stopPrepagation()方法是用來阻止事件冒泡的。（3）event.target。（4）event.relatedTarget。（5）event.pageX 和 event.pageY。5.2 jQuery 中的動畫效果

18、 基本的動畫效果指的是元素的隱藏和顯示。在 jQuery 中提供了兩種控制元素隱藏和顯示的方法，一種是分別隱藏和顯示匹配元素，另一種是切換元素的可見狀態(tài)，也就是如果元素是可見的，切換為隱藏；如果元素是隱藏的，切換為可見的。5.2.1 隱藏匹配元素 使用 hide()方法可以隱藏匹配的元素。hide()方法相當(dāng)于將元素 CSS 樣式屬性 display 的值設(shè)置為 none，它會記住原來的 display 的值。hide()方法有兩種語法格式，一種是不帶參數(shù)的形式，用于實現(xiàn)不帶任何效果的隱藏匹配元素，其語法格式如下：hide() 另一種是帶參數(shù)的形式，用于以優(yōu)雅的動畫隱藏所有匹配的元素，并在隱藏

19、完成后可選地觸發(fā)一個回調(diào)函數(shù)，其語法格式如下：hide(speed,callback)speed：用于指定動畫的時長。可以是數(shù)字，也就是元素經(jīng)過多少毫秒（1000 毫秒=1 秒）后完全隱藏。也可以是默認(rèn)參數(shù) slow（600 毫秒）、normal（400 毫秒）和 fast（200 毫秒）。 callback：可選參數(shù)，用于指定隱藏完成后要觸發(fā)的回調(diào)函數(shù)。5.2.2 顯示匹配元素 使用 show()方法可以顯示匹配的元素。show()方法相當(dāng)于將元素 CSS 樣式屬性 display 的值設(shè)置為 block 或inline 或除了 none 以外的值，它會恢復(fù)為應(yīng)用 display:none

20、之前的可見屬性。show()方法有兩種語法格式，一種是不帶參數(shù)的形式，用于實現(xiàn)不帶任何效果的顯示匹配元素，其語法格式如下：show() 另一種是帶參數(shù)的形式，用于以優(yōu)雅的動畫顯示所有匹配的元素，并在顯示完成后可選擇地觸發(fā)一個回調(diào)函數(shù)，其語法格式如下：show(speed,callback) speed：用于指定動畫的時長?？梢允菙?shù)字，也就是元素經(jīng)過多少毫秒（1000 毫秒=1 秒）后完全顯示。也可以是默認(rèn)參數(shù) slow（600 毫秒）、normal（400 毫秒）和 fast（200 毫秒）。 callback：可選參數(shù)，用于指定顯示完成后要觸發(fā)的回調(diào)函數(shù)。5.2.3 切換元素的可見狀態(tài) 使用

21、 toggle()方法可以切換元素的可見狀態(tài)，也就是說如果元素是可見的，切換為隱藏；如果元素是隱藏的，切換為可見。toggle()方法的語法格式如下：toggle();5.2.4 淡入淡出的動畫效果 如果在顯示或隱藏元素時不需要改變元素的高度和寬度，只單獨改變元素的透明度的時候，就需要使用淡入淡出的動畫效果了。jQuery中提供了表5-2所示的實現(xiàn)淡入淡出動畫效果的方法。表 5-2 實現(xiàn)淡入淡出動畫效果的方法 這 3 種方法都可以為其指定速度參數(shù)，參數(shù)的規(guī)則與 hide()方法和 show()方法的速度參數(shù)一致。在使用fadeTo()方法指定不透明度時，參數(shù)只能是 0 到 1 之間的數(shù)字，0

22、表示完全透明，1 表示完全不透明，數(shù)值越小圖片的可見性就越差。5.2.5 滑動效果 在 jQuery 中，提供了 slideDown()方法（用于滑動顯示匹配的元素）、slideUp()方法（用于滑動隱藏匹配的元素）和 slideToggle()方法（用于通過高度的變化動態(tài)切換元素的可見性）來實現(xiàn)滑動效果。1滑動顯示匹配的元素 使用 slideDown()方法可以向下增加元素高度，動態(tài)顯示匹配的元素。slideDown()方法會逐漸向下增加匹配的隱藏元素的高度，直到元素完全顯示為止。slideDown()方法的語法格式如下：slideDown(speed,callback)speed：用于指定

23、動畫的時長。可以是數(shù)字，也就是元素經(jīng)過多少毫秒（1000 毫秒=1 秒）后完全顯示。也可以是默認(rèn)參數(shù) slow（600 毫秒）、normal（400 毫秒）和 fast（200 毫秒）。 callback：可選參數(shù)，用于指定顯示完成后要觸發(fā)的回調(diào)函數(shù)。2滑動隱藏匹配的元素 使用 slideUp()方法可以向上減少元素高度，動態(tài)隱藏匹配的元素。slideUp()方法會逐漸向上減少匹配的顯示元素的高度，直到元素完全隱藏為止。slideUp()方法的語法格式如下：slideUp(speed,callback) speed：用于指定動畫的時長?？梢允菙?shù)字，也就是元素經(jīng)過多少毫秒（1000 毫秒=1 秒

24、）后完全隱藏。也可以是默認(rèn)參數(shù) slow（600 毫秒）、normal（400 毫秒）和 fast（200 毫秒）。 callback：可選參數(shù)，用于指定隱藏完成后要觸發(fā)的回調(diào)函數(shù)。3通過高度的變化動態(tài)切換元素的可見性 通過 slideToggle()方法可以實現(xiàn)通過高度的變化動態(tài)切換元素的可見性。在使用 slideToggle()方法時，如果元素是可見的，就通過減小高度使全部元素隱藏，如果元素是隱藏的，就增加元素的高度使元素最終全部可見。slideToggle()方法的語法格式如下：slideToggle(speed,callback)speed：用于指定動畫的時長?？梢允菙?shù)字，也就是元素經(jīng)

25、過多少毫秒（1000 毫秒=1 秒）后完全顯示或隱藏。也可以是默認(rèn)參數(shù) slow（600 毫秒）、normal（400 毫秒）和 fast（200 毫秒）。 callback：可選參數(shù)，用于指定動畫完成時觸發(fā)的回調(diào)函數(shù)。5.2.6 自定義的動畫效果1使用 animate()方法創(chuàng)建自定義動畫 animate()方法的操作更加自由，可以隨意控制元素的屬性，實現(xiàn)更加絢麗的動畫效果。jQuery 1.8 版本中加入了該方法。animate()方法的基本語法格式如下：animate(params,speed,callback) params：表示一個包含屬性和值的映射，可以同時包含多個屬性，例如lef

26、t:200px, top:100px。 speed：表示動畫運行的速度，參數(shù)規(guī)則同其他動畫效果的 speed 一致，它是一個可選參數(shù)。callback：表示一個回調(diào)函數(shù)，當(dāng)動畫效果運行完畢后執(zhí)行該回調(diào)函數(shù)，它也是一個可選參數(shù)。2使用 stop()方法停止動畫 stop()方法也屬于自定義動畫函數(shù)，它會停止匹配元素正在運行的動畫，并立即執(zhí)行動畫隊列中的下一個動畫。jQuery 1.7 版本中加入了該方法。stop()方法的語法格式如下：stop(clearQueue,gotoEnd) clearQueue：表示是否清空尚未執(zhí)行完的動畫隊列（值為 true 時表示清空動畫隊列）。 gotoEnd：

27、表示是否讓正在執(zhí)行的動畫直接到達(dá)動畫結(jié)束時的狀態(tài)（值為 true 時表示直接到達(dá)動畫結(jié)束時狀態(tài)）。3判斷元素是否處于動畫狀態(tài) 使用 animate()方法時，當(dāng)用戶快速在某個元素上執(zhí)行 animate()動畫時，就會出現(xiàn)動畫累積。解決這個問題的方法是判斷元素是否正處于動畫狀態(tài)，如果不處于動畫狀態(tài)才為元素添加新的動畫，否則不添加。具體代碼如下：if(!$(element).is(:animated) / 判斷元素是否處于動畫狀態(tài)，如果沒有處于動畫狀態(tài)，則添加新的動畫 判斷是否處于動畫狀態(tài)這個方法在 animate()動畫中會經(jīng)常使用到，讀者需要特別注意和掌握。4延遲動畫的執(zhí)行 在動畫執(zhí)行的過程中

28、，我們經(jīng)常會對動畫進(jìn)行延遲操作，這時就需要使用到 delay()方法。 delay()方法允許將隊列中的函數(shù)延遲執(zhí)行，它既可以推遲動畫隊列中函數(shù)的執(zhí)行，也可以用于自定義隊列。5使用 finish 停止當(dāng)前正在執(zhí)行的動畫 使用finish ()方法時，可以停止當(dāng)前正在運行的動畫，并且刪除所有其他的對話。.finish()方法和.stop(true, true)類似，.stop(true, true)將清除隊列，并且目前的動畫跳轉(zhuǎn)到其最終值，而.finish() 會導(dǎo)致所有排隊的動畫的 CSS屬性跳轉(zhuǎn)到它們的最終值。它是在 jQuery 1.9 版本中加入的。具體代碼如下：$(.container ).click(function() $(div).finish(); );5.3 綜合實例：實現(xiàn)圖片傳送帶 所謂圖片傳送帶是指在頁面的指定位置固定顯示一定數(shù)量的圖片（其他圖片隱藏），單擊最左邊的圖片時，全部圖片均向左移動一張圖片的位置，單擊最右邊的圖片時，全部圖片均向右移動一張圖片的位置，這樣既可以查看到全部圖片，又能節(jié)省頁面空間，比較實用。運行本實例，將顯示圖 5-23 所示的效果