jQuery 安裝

語言: CN / TW / HK

本節我們學習 jQuery 的安裝,我們在實際專案中,如果要使用 jQuery,則需要先下載 jQuery 庫,然後把它引入到要使用的網頁中。

jQuery 有下面幾種使用方法:

  • 從官網下載 jQuery 庫,然後引入到頁面中。
  • 使用命令安裝 jQuery,例如 npmbower 命令。
  • CDN 中載入 jQuery, 比如從 Google 中載入 jQuery

jQuery下載

我們 可以在 jQuery 的官網下載 jQuery,下載地址為:https://jquery.com/download/

有兩個版本的 jQuery 可供下載:

  • 生產版本:用於實際網站中,已被精簡和壓縮。
  • 開發版本:用於測試和開發,未壓縮,是可讀程式碼。

我們根據需要下載相應的版本,例如我下載的是 jquery-3.5.1.min.js 檔案,然後可以把下載好檔案放到與網頁相同的目錄中,這樣更方便使用。

接著就可以在頁面中引入 jquery 檔案啦,引入格式如下所示:

<script src="jquery-3.5.1.min.js"></script>

使用npm安裝jQuery

jQuerynpm 上註冊為軟體包,所以我們可以使用 npm CLI 命令安裝最新版本的 jQuery

npm install jquery

或者使用 Yarn 命令安裝也可以:

yarn add jquery

使用這兩種方式安裝 jQuery,我們可以在 node_modules/jquery/dist/ 中找到一個未壓縮的發行版,一個壓縮的發行版和一個對映檔案。

使用Bower安裝jQuery

除了 npmjQuery 還通過 Bower 註冊為軟體包,所以我們也可以使用 bower 命令安裝最新版本的 jQuery

bower install jquery

使用這種方式,會將 jQuery 安裝到 Bower 的安裝目錄,預設為 bower_components。我們可以在 bower_components/jquery/dist/ 目錄下找到一個未壓縮的發行版,一個壓縮的發行版和一個對映檔案。

將jQuery與CDN一起使用

如果我們不希望下載並存放 jQuery 的話,我們也可以從 CDN(內容分發網路)引用它。

CDN 是構建在現有網路基礎之上的智慧虛擬網路,依靠部署在各地的邊緣伺服器,通過中心平臺的負載均衡、內容分發、排程等功能模組,使使用者就近獲取所需內容,降低網路擁塞,提高使用者訪問響應速度和命中率。

比如谷歌和微軟伺服器都存有 jQuery,如果我們需要引用的話,可以像下面這樣:

  • Google 引用 jQuery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
  • Microsoft 引用 jQuery

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
    

總結

上面我們講到了 jQuery 的幾種安裝方式,在後面的學習章節中,我們會採用直接在官網下載 jQuery 庫,然後在頁面中引用的方式來使用 jQuery