jQuery是一個Javascript庫，它支持鏈式操作方式,即對發生在同一個JQuery對象上的一組動作，可以直接接連寫無需要重復獲取對象。這一特點使得JQuery的代碼無比優雅，而且有強大的選擇器，出色的DOM操作,可靠的事件處理機制,完善的Ajax,關鍵是有出色的瀏覽器兼容性，開發項目時可以不用考慮兼容性，因為jQuery已經替我們都修正好了，最后還有一點是jQuery有非常多的插件，功能非常豐富。
jQuery和Vue(包括react、angular)的區別就不說了，網上一大堆哈哈，前者是MVC模式，后者是MVVM模式,MVVM模式的出現不是說為了取代MVC模式的，它們是可以共同存在的，很多時候還是使用mvc模式更方便，對於一些數據交互比較多的可以使用vue之類的腳手架來進行開發項目,難度相比較也有點大
jQuery的代碼結構相比較簡單，就是一個匿名函數，將入口掛載到window.$和window.jQuery屬性上，我們模擬一下jQuery的結構，由淺入深，如下:
<!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>
打印如下:
第一行輸出是$('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的用法和原理實現。