---
title: jQuery
tags: 網頁組
---

# jQuery - 前言

在認識了基礎的 JavaScript 以後，我們要來介紹在新手時期非常好上手的一個函式庫，它提供了非常多方便的功能，而且他真的很好學會，所以接下來就讓我們來認識這個 jQuery 到底是什麼吧。

# 本節目標

- 認識 jQuery
- 試著使用 jQuery

# jQuery 是什麼?

jQuery 是一個以 Javascript 來編寫的函式庫，意思就是 jQuery 先幫你實作了很多 Javascript 的函數功能，主要目的就跟 Logo 上面寫的精神一樣：「write less, do more」，因為如果要直接用 Javascript 將所有功能實作出來，常常要費時費力且造成大量且難以閱讀的程式碼，而透過 jQuery 的協助會讓我們減少許多開發時間並且使程式碼更容易維護。

## 如何使用?

就像在上一篇練習時所推薦的 basic 資料夾內的結構，我們可以將 JavaScript 寫成另一個檔案，在主要的 index.html 中匯入它，我們也可以把 jQuery 下載下來之後匯入它，另外我們還可以透過 cdn 的方式將它匯入，此篇教學將以 CDN 為主。

### 版本那麼多種我應該選哪個？

截至 2022/1/16，目前主要版本為 v3.6.0，推薦在使用套件時選擇最穩定的版本，不要使用過舊的版本，所以本篇教學將以 v3.6.0為主。

除了版本號以外，還分了 uncompressed、minified、slim 與 slim minified 四種版本。
- uncompressed 代表為未壓縮的一般版，直接用編輯器可以看到他是怎麼寫的。
- minified 代表壓縮版，除去了換行與空白字元，讓檔案比較小，讀取比較快。
- slim, slim minified版，主要是閹割掉了一些關於animate動畫與ajax功能。

如果你看不懂我在說什麼的話，用minified版就對了，因為你也不會需要改變它的核心程式碼。

### 引入 jQuery

我們一樣以 basic 來做為範例，我們先前往官網的 CDN 位置。
:::info
官網位置：[jQuery CDN](https://code.jquery.com)
:::


點選 v3.6.0 minified 版本，就會跳出視窗：

複製下來以後，在我們的 html 內引用就能夠使用了，是不是很簡單呢?

> tips：integrity 及 crossorigin 都是額外的屬性，刪掉也能夠正常使用，這邊不多做解釋，如果有興趣的話，可以自行 google 理解。

如何確認自己有沒有正確引入，當然也可以寫一段程式碼看有沒有正確運行就好，不過這邊教大家使用開發者工具確認。

開啟開發者工具以後，切換到 Network 以後，就會看到這個頁面載入了哪些東西，可以看到有我們原本的 style.css 以及 main.js，最重要的是看到 jquery-3.6.0.min.js 被成功載入了。

## jQuery 初探

成功載入以後，我們先來認識一下 jQuery，接著就來實作看看吧！

### jQuery 的基本操作概念 (Coding basics)

jQuery 程式碼由 $ (或jQuery) 開始 → 後面會接著圓刮號「()」→ 而圓刮號裡面的參數是你想叫 jQuery 幫你找什麼 (取得哪個(些)元素) → 接著是你想叫 jQuery 執行什麼動作 (或處理事件)。

例如：

// 選取 id 為 box 的元素，並綁定 click 事件將其元素的背景顏色屬性改成綠色

原生 JavaScript
document.getElementById("box").addEventListener('click',function() {
    box.style.backgroundColor = "green";
})

jQUery
$('#box').click(function() {
  $('#box').css('background-color', 'green');
});

串接 (Chaining)
在 jQuery 中，幾乎所有成員都會返回自己執行後的結果 - 也是一個 jQuery 物件，因此你可以連續地使用函數 (Chaining)。以下我們用一個範例來說明 Chaining 是怎麼一回事：

$('#el').css('color', 'blue').css('background-color', 'red');

上面這段程式碼由兩段函式組成：

// 先將文字改成藍色
$('#el').css('color', 'blue');
// 再將背景顏色改為紅色
$('#el').css('background-color', 'red');
但利用 jQuery Chaining 的特性程式只剩一行，是不是簡潔多了？

### 練習
其實我們可以發現到，jQuery 的操作就跟 JavaScript 一樣，只是會寫得更加簡潔，以及 jQuery 提供了許多方便的功能。

因為希望大家能夠多多培養自學的能力，不要只會這系列文章內所講述的東西，所以接下來希望大家可以直接進入練習階段。

#### 練習目標
:::success
將上一篇的 JavaScript 30 或是 100-days-100-projects 以 jQuery 改寫

[W3Schools - Jquery](https://www.w3schools.com/jquery/default.asp)
:::

一樣假如遇到不清楚的地方可以查找 W3Schools 的 jQuery 教學。

:::warning
不論遇到什麼問題都能夠直接詢問學長姊，千萬不要害羞 ❕❕❕
:::

---

## 參考資料
:::info
[JQuery 筆記 (一) – 淺談 JQuery](https://ithelp.ithome.com.tw/articles/10092592)

[jQuery是什麼，它跟JavaScript有什麼關係？它又有什麼能耐呢？](https://progressbar.tw/posts/6)

[jQuery: The Write Less, Do More, JavaScript Library](https://www.fooish.com/jquery/)
:::

---