jQuery 與 JavaScript – 區別？哪個更好？

本文將解釋 JavaScript 和 jQuery 是什麼，它們有何不同，以及應該如何/為什麼要使用它們。

什麼是 JavaScript

JavaScript 於 1990 年代中期開始作為一種腳本語言用於為網頁添加交互性。

隨著時間的推移，它已經發展成為一種功能齊全的編程語言，甚至可以在網絡瀏覽器之外運行（在我們的 Node.js 文章中有更多詳細信息）。

您還可以在此處查看我們概述 JavaScript 和 Typescript 之間差異的文章。

什麼是 jQuery？

jQuery 是一個圖書館編寫 在 JavaScript 中。

它不是一種單獨的語言或實現——它只是一組用 JavaScript 編寫的有用工具。它使用相同的語法並在相同的位置運行；它只是一堆額外的工具，可以更輕鬆地向頁面添加交互式元素、獲取和解析數據以及執行邏輯。

具體來說，jQuery 的主要目的是讓與 HTML DOM 的交互變得更容易。

它還包含有用的工具，用於使用 REST 和 AJAX 從 API 和 Web 服務中檢索數據。

什麼是 HTML DOM，jQuery 對它有什麼幫助？

處理 HTML 網頁時，DOM （文檔對像模型）就是其中的HTML標籤形成的樹狀結構。

每個 HTML 元素都在 DOM 中表示——段落、表格、圖像、鏈接——一切。

jQuery 讓您可以輕鬆地導航和修改 DOM 以訪問和更改頁面元素。 jQuery 提供的輔助函數比嘗試在純 JavaScript 中做同樣的事情要容易得多。

例如，考慮這個 HTML 表格（稱為“peopleTable ") 包含姓名 和年齡 列：

<table id="peopleTable">
    <tr>
        <th>
            Name
        </th>
        <th>
            Age
        </th>
    </tr>
    <tr>
        <td>
            Bob
        </td>
        <td>
            34
        </td>
    </tr>
</table>

使用jQuery可以輕鬆遍歷DOM，選擇表格並添加一行：

$('#peopleTable tr:last').after('<tr><td>Tim</td><td>21</td></tr>');

上面，jQuery 找到了 peopleTable 然後找到最後一個 表中的行並在之後添加新行 它（包含 Tim 的記錄）。

在 JavaScript 中執行此操作更加費力且難以閱讀：

var newRow = document.getElementById('myTable').getElementsByTagName('tbody')[0].insertRow(document.getElementById('myTable').rows.length);
newRow.innerHTML = '<tr><td>Tim</td><td>21</td></tr>';

那麼，我應該使用哪個？

jQuery 並不是天生的更好 而不是 JavaScript——它只是一個擴展 JavaScript 功能的庫。它可能適合也可能不適合您的需求，具體取決於您正在構建的應用程序類型。

自從 jQuery 鼎盛時期以來，JavaScript 已經成熟了很多，所以很多 jQuery 解決的問題現在在編寫 JavaScript 代碼時不再是問題。當然值得研究一下你是否真的需要使用它——現在 JavaScript 已經成熟，依賴大型輔助庫並不總是編寫代碼的最佳方式。

更現代的 JavaScript 庫，例如 Angular 和反應 是 jQuery 的替代品，它可能更適合您，尤其是在構建移動應用程序時。

jQuery 是什麼不是 適合是服務器端工作。在 Node.JS 中運行的應用程序沒有要遍歷的 HTML 頁面，因此 jQuery 的用途與 Node.js 應用程序內部無關。