jQuery的學習

一、瞭解jQuery
jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript代碼庫(或JavaScript框架)。jQuery設計的宗旨是"write Less,Do More",即倡導寫更少的代碼,做更多的事情。它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設計模式,優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結爲:具有獨特的鏈式語法和短小清晰的多功能接口;具有高效靈活的css選擇器,並且可對CSS選擇器進行擴展;擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
二、jQuery的語言特點
快速獲取文檔元素

jQuery的選擇機制構建於Css的選擇器,它提供了快速查詢DOM文檔中元素的能力,而且大大強化了JavaScript中獲取頁面元素的方式。

提供漂亮的頁面動態效果

jQuery中內置了一系列的動畫效果,可以開發出非常漂亮的網頁,許多網站都使用jQuery的內置的效果,比如淡入淡出、元素移除等動態特效。

創建AJAX無刷新網頁

AJAX是異步的JavaScript和ML的簡稱,可以開發出非常靈敏無刷新的網頁,特別是開發服務器端網頁時,比如PHP網站,需要往返地與服務器通信,如果不使用AJAX,每次數據更新不得不重新刷新網頁,而使用AJAX特效後,可以對頁面進行局部刷新,提供動態的效果。

提供對JavaScript語言的增強

jQuery提供了對基本JavaScript結構的增強,比如元素迭代和數組處理等操作。

增強的事件處理

jQuery提供了各種頁面事件,它可以避免程序員在HTML中添加太事件處理代碼,最重要的是,它的事件處理器消除了各種瀏覽器兼容性問題。

更改網頁內容

jQuery可以修改網頁中的內容,比如更改網頁的文本、插入或者翻轉網頁圖像,jQuery簡化了原本使用JavaScript代碼需要處理的方式。
三、jQuery的工作原理
jQuery的模塊可以分爲3部分:入口模塊、底層支持模塊和功能模塊。

在構造jQuery對象模塊中,如果在調用構造函數jQuery()創建jQuery對象時傳入了選擇器表達式,則會調用選擇器Sizzle(一款純JavaScript實現的CSS選擇器引擎,用於查找與選擇器表達式匹配的元素集合)遍歷文檔,查找與之匹配的DOM元素,並創建一個包含了這些DOM元素引用的jQuery對象。

瀏覽器功能測試模塊提供了針對不同瀏覽器功能和bug的測試結果,其他模塊則基於這些測試結果來解決瀏覽器之間的兼容性問題。

在底層支持模塊中,回調函數列表模塊用於增強對回調函數的管理,支持添加、移除、觸發、鎖定、禁用回調函數等功能;異步隊列模塊用於解耦異步任務和回調函數,它在回調函數列表的基礎上爲回調函數增加了狀態,並提供了多個回調函數列表,支持傳播任意同步或異步回調函數的成功或失敗狀態;數據緩存模塊用於爲DOM元素和Javascript對象附加任意類型的數據;隊列模塊用於管理一組函數,支持函數的入隊和出隊操作,並確保函數按順序執行,它基於數據緩存模塊實現。

在功能模塊中,事件系統提供了統一的事件綁定、響應、手動觸發和移除機制,它並沒有將事件直接綁定到DOM元素上,而是基於數據緩存模塊來管理事件;Ajax模塊允許從服務器上加載數據,而不用刷新頁面,它基於異步隊列模塊來管理和觸發回調函數;動畫模塊用於向網頁中添加動畫效果,它基於隊列模塊來管理和執行動畫函數;屬性操作模塊用於對HTML屬性和DOM屬性進行讀取、設置和移除操作;DOM遍歷模塊用於在DoM樹中遍歷父元素、子元素和兄弟元素;DOM操作模塊用於插入、移除、複製和替換DOM元素;樣式操作模塊用於獲取計算樣式或設置內聯樣式;座標模塊用於讀取或設置DOM元素的文檔座標;尺寸模塊用於獲取DOM元素的高度和寬度。

最近正在跟着老師學習jQuey,感覺jQuery真的是一款非常強大的代碼框架,
學習中通過了解jQuery提供的各種函數,實現了很多之前需要很多js代碼才能實現的小功能。
期間老師也帶着我們手動封裝了自己的jQuery框架,瞭解了jQuery的工作原理。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章