jQuery是一個Javascript庫,它支持鏈式操做方式,即對發生在同一個JQuery對象上的一組動做,能夠直接接連寫無須要重複獲取對象。這一特色使得JQuery的代碼無比優雅,並且有強大的選擇器,出色的DOM操做,可靠的事件處理機制,完善的Ajax,關鍵是有出色的瀏覽器兼容性,開發項目時能夠不用考慮兼容性,由於jQuery已經替咱們都修正好了,最後還有一點是jQuery有很是多的插件,功能很是豐富。html
jQuery和Vue(包括react、angular)的區別就不說了,網上一大堆哈哈,前者是MVC模式,後者是MVVM模式,MVVM模式的出現不是說爲了取代MVC模式的,它們是能夠共同存在的,不少時候仍是使用mvc模式更方便,對於一些數據交互比較多的可使用vue之類的腳手架來進行開發項目,難度相比較也有點大vue
jQuery的代碼結構相比較簡單,就是一個匿名函數,將入口掛載到window.$和window.jQuery屬性上,咱們模擬一下jQuery的結構,由淺入深,以下:react
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> (function(window,undefined){ var jQuery = (function(){ return 'Hello jQuery'; })() window.jQuery = window.$ = jQuery; })(window) console.log($) </script> </body> </html>
就是定義一個匿名函數,內部再定義一個jQuery變量,值爲一個當即執行表達式,最後將值掛載到window.jQuery和window.$上,打印出來的以下:瀏覽器
實際上固然不可能直接返回一個字符串,其實在這個當即執行表達式裏,會執行new jQuery.fn.init()建立一個函數對象,最後返回改函數對象,咱們加深一點代碼,和jQuery內部同樣,以下:緩存
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="p">123</p> <script> (function(window,undefined){ var jQuery = (function(){ var jQuery = function(selector){ //再定義一個函數,內部返回new一個jQuery.fn.init對象,並返回 return new jQuery.fn.init(selector) } jQuery.fn={ init:function(selector){ this[0] = selector; return this } } return jQuery; })() window.jQuery = window.$ = jQuery; })(window) console.log($('p'))
console.log($('p')[0]) </script> </body> </html>
打印以下:mvc
第一行輸出是$('p')對象,第二行就是p這個Dom節點引用了,第一行輸出是否是和真實的jQuery對象很像呢,咱們用真實的jQuery打印看看:異步
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <p id="p">123</p> <script> console.log($(p)) console.log($(p)[0]) </script> </body> </html>
輸出以下:函數
能夠看到真實的jQuery返回的也是一個init對象,第二行輸出麼就是一摸同樣了。測試
jQuery的代碼結構就是這樣的,最後返回的其實內部的jQuery.fn.init對象,而後會把jQuery.fn設置爲jQuery.fn.init的原型,最後在jQuery.fn或jQuery.fn.prototype上設置大量的屬性和方法,這些屬性和方法就是jQuery對外的屬性和方法,供咱們使用了。
jQuery的代碼結構按照功能不一樣分爲三部分:
入口模塊(用於構造jQUery對象)
底層支持模塊(供功能模塊使用的)
功能模塊(最後實現的操做)
底層支持模塊又分爲:
選擇器模塊
瀏覽器功能測試
異步隊列
數據緩存和隊列模塊
功能模塊又細分爲
屬性操做
事件系統
DOM遍歷
DOM操做
樣式操做CSS
異步請求
動畫模塊
後面慢慢介紹每一個模塊,每一個API的用法和原理實現。