jQuery 1.7筆記
6 | 26,273 |
jQuery又推出新版本囉! 1.7版已於11/3正式發佈~ 又到了該整理新版筆記的時候:
PS: 從上週五就有"好多人"提醒我(只差走在路上沒被人拍肩): 嘿! jQuery出1.7了耶~~ 雖然遲了幾天,但我還是很自愛地再當一下值日生... XD
- .on()及.off()
要了解這兩個新事件函數前,得先從.delegate()講起。簡單來說,.delegate()的做法是在父元素掛載事件函數,用以處理其下子元素(甚至是稍後才要建立的子元素)的事件邏輯。例如: $("#someTable").delegate("td", "click", fn)可以指定<table id="someTable">其下所有<td>的click事件,即使當時<table>根本是空的也無所謂。這種寫法比$("#someTable td").click(fn)來得有效率,且格外適合<td>會動態增減的場合,不用每次.append()完<td>後都補呼叫.click(fn);而且樣要處理未來才新增的元素,.delegate()也比.live()效率更好一點點。(關於.delegate()的進一步說明,可參考前文)
至於.on()/.off(),我們可以想像它們就是具有.delegate()功能的.bind()及具有.undelegate()功能的.unbind()!
$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );
由規格看來.on(), .off()只是讓.bind()及.unbind()多支援selector參數,當傳入selector參數時,就等同於.delegate()及.undelegate()。例如: 原本的$("#myTable").delegate("td", "click", fn)可寫成$("#myTable").on("click", "td", fn)。
新增這兩個函數的用意主要是讓.delegate()/bind()回歸一致的API介面: 原來.delegate()是先傳selector,再傳事件名稱,.bind()的第一個參數則是事件名稱,而.on()的寫法跟.bind()更接近,只需多傳selector就可以變身delegate()! jQuery 1.7希望用on/off取代bind/delegate、unbind/undelegate。[有一點要注意,如果要傳入字串當成事件的data參數,為避免.on()無法釐清傳入的到底是selector還是data,需在selector參數傳入null以明確分別]
除此之外,推改用on/off另一個好處是"比較短,可以少打幾個字"... ( jQuery真是個追求簡潔成痴的語言呀! XD) - 事件委派的效能提升
前面所提的.delegate()事件委派做法,在網頁或元素很複雜時,會比.bind()效率高出許多!(可參考前文的範例) 當代Javascript開發裡,事件委派扮演的角色日益重要,有鑑於此 ,jQuery團隊便積極致力於.delegate()的效能提升。在1.7版中,針對.delegate()的selector執行做了最佳化(針對部分情境使用瀏覽器內建的matchesSelector API取代Sizzle引擎),相較於1.6.4,效能幾乎提升為兩倍。 - 在IE6/7/8上對HTML5有更好的支援
原本在IE6/7/8等"HTML5文盲"瀏覽器執行.html()時,無法支援<section>等HTML5標籤,jQuery 1.7可透過innerShiv克服此一問題,但網頁必須引用html5shiv或Modernizr等HTML5相容程式庫。延伸閱讀: The Story of the HTML5 Shiv 改善.slideToggle()
or.fadeToggle()等動畫運作時初值及結束狀態的保存,在搭配.stop()時行為更直覺,更符合預期。
支援
Asynchronous Module Definition (AMD API,一種解決Javascript模組相依性及非同步載入議題的技術)- jQuery.Deferred提供新的進度回報及通知方法,並增加.state()可查詢最新狀態。另外,jQuery.Deferred底層改用
jQuery.Callbacks
作為佇列及觸發一系列處理程式(Handler)的管理機制,可供Plugin開發者應用。 - 新增jQuery.isNumeric()函數,可用來判斷傳入值是否為數字
- 移除了一些相容較差或未公開且過時的屬性/函數: event.layerX, event.layerY(但可由event.orginEvent.layerX取得,如果你執意要續用的話)、jQuery.isNaN()、jQuery.event.proxy()
Comments
# by MerlinJY
等好久了XD
# by ChaN
黑暗大,delegate 當初使元素不在的時候應該不會 work 吧 http://chan15.info/demo/live.html
# by Jeffrey
to ChaN, 對,前文也有提過,我想這種情境下可以改用live(相當於$(document).delegate())、或是將delegate()綁在再往上一層的母元素上(例如你範例中的#f3)。
# by 顏先生
黑暗大您好: 不知是否可邀請您來敝單位演講jquery的相關技術呢? 讓敝單位的學生及技術人員了解此一技術. 若是您同意的話,麻煩您與我連繫,謝謝. email:a*****x@stut.edu.tw
# by Lin
版主你好: 不知道您有沒有在研究 fullcalendar,因外我有碰到許多技術性的困難想跟您請教。
# by Lin
版大您好: 我有一個關於fullcalendar的問題 就是如何在客戶端直接新增事件