- jQuery從入門到精通 (軟件開發視頻大講堂)
- 明日科技
- 2734字
- 2020-11-28 23:47:19
3.1 jQuery簡述
jQuery是一套簡潔、快速、靈活的JavaScript腳本庫,它是由John Resig于2006年創建的,它幫助我們簡化了JavaScript代碼。由于jQuery簡便易用,文檔非常豐富,受到眾多開發人員的推崇。
使用jQuery極大地提高了編寫JavaScript代碼的效率,讓書寫出來的代碼更加簡潔、健壯。同時網絡上豐富的jQuery插件也讓開發人員的工作變得更為輕松,讓項目的開發效率有了質的提升。
說明
jQuery不但為開發人員提供了靈活的開發環境,并且它是開源的,在其背后有很多強大的社區和程序愛好者的支持。
3.1.1 jQuery能做什么
過去只有Flash才能實現的動畫效果,jQuery也做到了,并且絲毫不遜色于Flash,這讓廣大開發人員感受到了Web 2.0時代的魅力。jQuery還受到許多著名網站的青睞,如中國網絡電視臺、CCTV、京東網上商城、人民網等,許多網站都應用了jQuery。下面我們就來看看網絡上使用jQuery實現的絢麗的效果。
1.中國網絡電視臺應用的jQuery效果
訪問中國網絡電視臺的電視直播頁面后,在央視頻道欄目中就應用了jQuery實現鼠標移入移出的效果。將鼠標移動到某個頻道上時,該頻道的內容會添加一個圓角矩形的灰色背景,用于突出顯示頻道內容,如圖3.1所示。將鼠標移出該頻道后,頻道內容會恢復為原來的樣式。

圖3.1 中國網絡電視臺應用的jQuery效果
2.京東網上商城應用的jQuery效果
訪問京東網上商城的首頁時,在右側有一個為手機和游戲充值的欄目,這里應用了jQuery實現了標簽頁的效果。將鼠標移動到“手機充值”欄目上時,標簽頁中將顯示為手機充值的相關內容,如圖3.2所示,將鼠標移動到“游戲充值”欄目上時,將顯示為游戲充值的相關內容。

圖3.2 京東網上商城應用的jQuery效果
3.人民網應用的jQuery效果
訪問人民網的首頁時,有一個以幻燈片輪播形式顯示的圖片新聞,如圖3.3所示,這里就是應用jQuery的幻燈片輪播插件實現的。

圖3.3 人民網應用的jQuery效果
3.1.2 jQuery的特點
jQuery是一個簡潔、快速的JavaScript腳本庫,它能讓你在網頁上輕松操作文檔、處理事件、運行動畫效果或者添加異步交互。jQuery可以提高我們的編程效率,它的主要特點如下:
代碼精致小巧。jQuery是一個輕量級的JavaScript腳本庫,其代碼非常小巧,最新版本的jQuery庫文件壓縮之后只有幾十KB。在網絡盛行的今天,提高網站用戶的體驗顯得尤為重要,小巧的jQuery完全可以做到這一點。
強大的功能函數。過去在寫JavaScript代碼時,如果沒有良好的基礎,很難寫出復雜的JavaScript代碼。JavaScript是不可編譯的語言,在復雜的程序結構中調試錯誤是一件非常痛苦的事情,大大降低了開發效率。使用jQuery的功能函數,能夠幫助開發人員快速地實現各種功能,而且會讓代碼優雅簡潔,結構清晰。
跨瀏覽器。關于JavaScript代碼的瀏覽器兼容問題一直是Web開發人員的噩夢,經常是頁面在IE瀏覽器下運行正常,但在Firefox下卻不兼容,這就需要開發人員在一個功能上針對不同的瀏覽器編寫不同的腳本代碼,這無疑是一件非常痛苦的事情。jQuery成功地將開發人員從這個噩夢中解脫出來,jQuery具有良好的兼容性,它兼容各大主流瀏覽器,支持的瀏覽器包括IE 6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+。
鏈式的語法風格。jQuery可以對元素的一組操作進行統一的處理,不需要重新獲取對象。也就是說可以基于一個對象進行一組操作,這種方式精簡了代碼量,減小了頁面體積,有助于瀏覽器快速加載頁面,提高用戶的體驗性。
注意
對于初學者不建議采用鏈式語法結構。
插件豐富。除了jQuery本身帶有的一些特效外,可以通過插件實現更多的功能,如表單驗證、拖放效果、Tab導航條、表格排序、樹型菜單以及圖像特效等。網上的jQuery插件很多,可以直接下載下來使用,并且插件是將JavaScript代碼和HTML代碼完全分離,便于維護。
3.1.3 jQuery的版本
1.jQuery 1.0
發布時間:發布于2006年8月。
jQuery庫的第一個穩定版本,已經具有了對CSS選擇符、事件處理和AJAX交互的穩健支持。
2.jQuery 1.1
發布時間:發布于2007年1月。
該版本大幅簡化了API,許多較少使用的方法被合并,減少了需要掌握和解釋的方法數量。
3.jQuery 1.1.3
發布時間:發布于2007年7月。
該版本變化包含了對jQuery選擇符引擎執行速度的顯著提升,從jQuery 1.1.3版本開始,jQuery的性能達到了Prototype、Mootools以及Dojo等同類JavaScript庫的水平。
4.jQuery 1.2
發布時間:發布于2007年9月。
該版本去掉了對XPath選擇符的支持,原因是相對于CSS語法,它已經變得多余了。jQuery 1.2版能夠支持對效果的更靈活定制,而且借助新增的命名空間事件,也使插件開發變得更容易。
另外,jQuery官方在該版本發布時,同時發布了jQuery UI,這個新的插件套件是作為曾經流行但已過時的Interface插件的替代項目而發布的。jQuery UI中包含大量預定義好的部件(Widget),以及一組用于構建高級元素(例如可拖放的界面元素)的工具。
5.jQuery 1.2.6
發布時間:發布于2008年5月。
該版本主要是將Brandon Aaron開發的流行的Dimensions插件的功能移植到了核心庫中。
6.jQuery 1.3
發布時間:發布于2009年1月。
該版本使用了全新的選擇符引擎Sizzle,庫的性能也因此有了極大提升。這一版正式支持事件委托特性。
7.jQuery 1.3.2
發布時間:發布于2009年2月。
該版本進一步提升了庫的性能,例如,改進了visible/:hidden選擇符和.height()/.width()方法的底層處理機制。另外,也支持查詢的元素按文檔順序返回。
8.jQuery 1.4
發布時間:發布于2010年1月14日。
該版本對代碼庫進行了內部重寫組織,開始建立一些風格規范。老的core.js文件被分為attribute.js、css.js、data.js、manipulation.js、traversing.js和queue.js; CSS和attribute的邏輯分離。
9.jQuery 1.5
發布時間:發布于2011年1月31日。
該版本修復了83個bug,解決了460個問題。重大改進有:重寫了Ajax模塊;新增延緩對象(Deferred Objects); jQuery替身——jQuery.sub();增強了遍歷相鄰節點的性能;jQuery開發團隊構建系統的改進。
10.jQuery 1.6
發布時間:發布于2011年5月。
該版本重寫了Attribute模塊和大量的性能改進,其最主要的兩個更新是:更新data()方法和獨立方法處理DOM屬性,并區分DOM的attributes和properties。
11.jQuery 1.7
發布時間:發布于2011年11月4日。
該版本包含了很多新的特征,特別提升了事件委派時的性能(尤其是在IE7下)。
12.jQuery 1.7.2
發布時間:發布于2012年3月24日。
該版本在1.7.1的基礎上修復了大量的bug,并改進了部分功能。而相比于1.7.2 RC1,只修復了一個bug。值得注意的是:如果你正在使用jQuery Mobile,請使用最新的jQuery 1.7.2和jQuery Mobile 1.1這兩個版本,因為之前的jQuery Mobile版本還基于jQuery core 1.7.1或更早的版本。
13.jQuery 1.8
發布時間:發布于2012年8月。
該版本的主要改動有:Sizzle選擇器引擎重新架構、重新改造動畫處理、自動CSS前綴處理、更靈活的$(html, props)等。
14.jQuery 1.8.3
發布時間:發布于2012年11月14日。
修復Bug和性能衰退問題,解決之前版本在IE9中調用Ajax失敗的問題。
15.jQuery 1.9
發布時間:發布于2013年1月。
移除了很多已經過時的API,并優化執行效率。
16.jQuery 1.10
發布時間:發布于2013年6月。
該版本的主要改動有:自由的HTML解析、增強的模塊性、修復IE9焦點死亡問題、修復Cordova等。
17.jQuery 1.11.1
發布時間:發布于2014年5月。
該版本的主要改進有:異步模塊定義AMD、性能提升、降低啟動時間,另外還修復一些Bug。
18.jQuery 2.0
發布時間:發布于2013年4月18日。
該版本不再支持IE 6/7/8,如果在IE9/10版本中使用“兼容性視圖”模式也將會受到影響。
19.jQuery 2.1.1
發布時間:發布于2014年5月。
該版本主要修復一些Bug,并解決瀏覽器的兼容性問題。
說明
以上列出的是jQuery的重要版本的發布時間及主要更新。除此之外,還有一些小范圍的升級版本,讀者如果有興趣,可以查看jQuery官方網站(http://jquery.com)中的相關說明。
- Learning Cython Programming(Second Edition)
- Interactive Data Visualization with Python
- NLTK基礎教程:用NLTK和Python庫構建機器學習應用
- UML+OOPC嵌入式C語言開發精講
- 假如C語言是我發明的:講給孩子聽的大師編程課
- Python深度學習原理、算法與案例
- 新一代SDN:VMware NSX 網絡原理與實踐
- Java高并發核心編程(卷1):NIO、Netty、Redis、ZooKeeper
- iPhone應用開發從入門到精通
- Frank Kane's Taming Big Data with Apache Spark and Python
- JavaScript機器人編程指南
- Vue.js 3應用開發與核心源碼解析
- Angular Design Patterns
- PHP從入門到精通(微視頻精編版)
- 測試基地實訓指導