jQuery 簡介
jQuery 是一個 JavaScript 的 liberary，為 John Resig 於 2006/01/14 於 BarCamp NYC 首次發表。其設計概念為 "write Less，Do More"。
jQuery 已經事先幫開發者實作許多 Javescript 常用的功能，讓開發者在使用 jQuery 時，可以輕易撰寫出對 DOM 元素的操作、事件處理、動畫設計、Ajax 且支援各種瀏覽器的簡化程式，令開發者專注在程式的邏輯架構上。
舉例生活的例子：
小美剛與小明結婚，小美為了清楚即將到來的情人節，打算與小明兩人在家吃自己親手做情人節大餐。她在 fb 的新手老婆社團中看到最近網路上有種服務，會幫你把一道菜的新鮮原料都切好備好，整包真空直送送到家，只要按照食譜烹煮即可，對於每天加班到晚上八點，沒時間也不知道怎麼選食材的小美來說，這項服務簡直是她的救星，小美馬上毫不猶豫地訂了五菜一湯的食材包，準備大展身手！
jQuery 就像已經一包包的食材，開發者能簡便且快速的製作網站功能
在 Javascript 中用 document.querySelector 來選取 DOM 節點中特定 element ，而在 jQuery 只要用一個 $('')選取。
例如：
<div id="username">小明</div>
// JavaScript
document.querySelector("#username") ，
// jQuery
${'#usernname'}
如此一來，這樣就可以少打很多英文字！沒錯，偷懶的天性是工程師解決問題的動力來源。
然而，近年來 ECMAScript 的語法調整，用 Javascipt 寫的程式不一定就比較繁雜（參考： You might not need jQuery），加上各家瀏覽器逐漸標準化、以及 React、Vue、Angular 等框架的流行，jQuery 有逐漸退流行的趨勢。
jQeury 優缺點
優點
jQuery 最大的優點就是縮短開發時間，以及跨瀏覽器整合。
- 輕量級：jQuery 是輕量的 JavaScript 框架，gzip 壓縮後，甚至能小於 20KB
語法簡潔：將常用的 Javascript 實現實作並打包，所以較 JavaScript 寫法簡便許多。
例如：獲取元素的值 <input type= "text" id="elementid"/> //javascript 程式碼 document.querySelector('#elementid').value //jQuery: $('#elementid').val();瀏覽器兼容性： jQuery 基本相容了現在主流的瀏覽器，讓開發者不再為瀏覽器的相容問題去建立各別瀏覽器的兼容庫
鏈式操作方式：jQuery 的鍊式操作，可以對同一個對象的多個操作連寫在一行程式碼裡。
例如：在 class 為 "intro" 的 <p>標籤中 ， 增加一個叫做 "nick" 的 class ，同時以動畫效果緩緩顯示 // HTML <p class="intro"></p> // jQuery $("p.intro").addClass("nick").show("slow"); 僅僅通過一行代碼就能實現上述效果。選擇器：開發者可以使用 CSS3 的選擇器，以及 jQuery 定義的选择器。豐富的選擇器，讓很多複雜的情況，往往在 jQuery 中一行程式碼就搞定。
例如：改變的 <table id="tb1"> 裡所有單數 < tr > 的文字顏色及背景色。 // jQuery $("#tb1 tr:odd").css("background-color", "red").css("color", "blue");完善的 Ajax: jQuery 簡化 ajax 程式碼，開發者使用
$.ajax ()代替XMLHttpRequest
例如：用GET方法發出請求// XMLHttpRequest 寫法 var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function() { if (this.status >= 200 && this.status < 400) var resp = this.response; } else { } }; request.onerror = function() { }; request.send(); // jQuery 寫法 $.ajax({ type: 'GET', url: '/my/url', success: function(resp) { }, error: function() { } });- 開源社群且使用支援強大：jQuery 是一款開源的產品，可以自由地使用并提出修改。jQuery 有良好的文件和幫助手冊，而且允許開發者定製外掛，透過有許多成熟的第三方外掛。開發者可以輕易實現很多絢麗的效果。
- 節省開發者學習時間：jQuery 提供了大量範例，新手開發者在編寫代碼前，可先查看 jQuery 是否有類似插件，了解插件程式碼原理，除了能夠迅速開始開發，且能提高技巧。
缺點
- 不能向後相容：新版本不兼容早期版本。因此若新版本 jQuery 移除某些不支援功能，開發者用早期版本寫好的程式碼或外掛可能就會無法正常使用，使用的插件越多，發生的機率越高。。
- 多個外掛衝突：同一頁面上使用多個外掛時，易發生衝突現象，如果這些外掛依賴相同事件或 selector 時。
想像將泰式酸辣湯底與咖哩湯底的料理包，同時用在同一鍋湯中，兩種湯都發揮了本色，卻又無法發揮本色。
- 瀏覽器依賴：jQuery 所有動作是以 DOM 操作出發，所以在沒有 DOM 的環境中，基本上無法使用（例如： node.js）
jQuery 與 vanilla JS 的關係？
什麼 vanilla JS？ 可以吃嗎？
vanilla JS：指的就是原生的 JavaScript。中文為香草的 vanilla 是傳統冰淇淋的口味中最標準、最常見的預設口味，於是軟體領域中被引申為 "由原作者發布時未經改動或客製化的版本。
jQuery 與 vanilla JS 有什關係？
jQuery：是基於原生的 JavaScript 所產生的 liberary，也就是說沒有 vanilla JS 就無法使用 jQuery，但沒有 jQuery 還是可以用 vanilla JS；而且在開發時，可根據情況將 jquery 跟 vanilla JS 一起使用，並非用了 jQuery，開發者就無法在檔案中其他地方寫 vanilla JS。
jQuery 在某些功能上輔助了開發者用更少的程式碼做快速開發，在前期瀏覽器百家爭鳴的時代，jQuery 簡潔的程式碼與跨瀏覽器兼容的特點深受開發者歡迎。
隨著瀏覽器們越來越規範化，以及 JavaScript 語法版本的更新，多數情況下使用 vanilla JS 已能輕鬆達成功能，省去下載 jQuery 的負擔。更重要的是，由於 vanilla JS 執行在客戶端，節省了伺服器的請求時間和頻寬，提升了執行的效率。
library 或 framework 都是用來方便開發的工具，唯有熟悉其定位與價值，在底層 Javascript 知識的基礎上，才能在開發過程中適時地引入。
參考來源：
