一、前言

伴隨著前端框架的不斷演進，jQuery 的使用慢慢地式微，甚至出現了棄用 jQuery 的建議【1】。雖然某些公司專案開上可能不再使用 jQuery，但是也不能保證，若是碰上一些古老專案的 matian 上，永遠不會碰到 jQuery，雖然學習 jQuery 有點雞肋，但是我不想等到真正要用到時才從頭學，不如趁現在先學起來放著。

語法過時不一定等於學了沒用，只要能解決問題，就是好語法。像是我現在寫文章和寫程式作業系統也是用 Windows 7 來完成的，再戰 10年應該沒問題吧？！

二、極速入門

2.1 基礎知識

jQuery 是什麼？它是 JavaScript 的函式庫（Library），所謂的函式庫可以將它想成是，我們現在做的組件全部收集放在一個儲存庫中，jQuery 在做的事情就是將 JavaScript 包起來，代替 JavaScript 繁雜的程式碼，也就是說，jQuery 其實就是簡化 JavaScript 的寫法。

函式庫想像成圖書館，JavaScript 想成書頁，jQuery 想成是一本書。不知道這樣說會不會比較好理解？

2.2 jQuery 特色

這裡介紹 jQuery 的一些特色如下：

1. 支援手機、平板等行動裝置。
2. 操作 DOM 可以更方便。
3. 擁有豐富的相關文件以及較少的 Bug。
4. 製作動畫效果較容易。
5. 支援大多的瀏覽器。
6. 擁有豐富的插件。
7. 較少的程式碼，可以縮短開發時間。
8. 免費。

2.3 寫下第一個 Hello World

可以先造訪 jQuery 官網 看看 API Documentation。

或是直接使用 CDN：（3.6.1 為範例）

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

接著先寫一個 Hello World。

HTML：

<p class="demo"></p>

在 JavaScript 中加入 Hello World。

$(function () {
    $('p').text('Hello World');
});

顯示結果：

額外注意：在讀取外部 js 檔案，並且匯入到 HTML 檔案時，jQuery 的 CDN 要寫在 main.js 的前面，原因是要先呼叫 jQuery 的 CDN 後才執行 JavaScript，不按照順序寫會出現錯誤。

補充：

原生 JavaScript 的寫法如下，可與 jQuery 寫法對照。

window.onload = function () {
    document.getElementById('demo').innerHTML = 'Hello World';
};

透過上面比較後，就能清楚明白簡化程式碼是怎麼一回事。

2.4 改寫 CSS 的樣式（通用寫法）

jQuery 的使用，會先以$符號當作是開頭，而$後面小括號裡面放的是Class 名稱或是 ID 名稱，可參考以下的例子。

JavaScript：

$('.demo').css('color', '#00f');

JavaScript：（通用寫法）

$('選擇器').方法('屬性', '值');

顯示結果：

jQuery 使用語法的格式類似通用寫法的範例，css 可以改成其他方法，針對不同方法帶入不同的參數。

2.5 多個 CSS 屬性的寫法

假設我們不只是想要修改文字的顏色，甚至是字體的大小、字型也要一併修改。這時候會很直覺的直接複製相同的語法，然後直接更改裡面的屬性與值，這裡提供另外一種的寫法，程式碼如下。

JavaScript：

$('.demo').css({
    color: '#0f0',
    'font-size': '2rem',
    'font-family': '微軟正黑體',
});

顯示結果：

在這個範例中我們更改了文字的顏色、字體大小以及字型，使用這種寫法的好處是，$('.demo').css就不會被重複呼叫三次，可以減少電腦的運算。

2.６ 監聽事件使用 on

我們在處理 Button 的監聽事件的時候，程式碼看起來非常的繁雜，在這裡 jQuery 提供了一種解決方法，我們可以使用on方法來處理監聽事件。

JavaScript：（on 語法）

$('選擇器').on('事件類型', function(){要做的事});

最常見的 click 寫法。

JavaScript：

 $('.demo').on('click', function () {
    $('.demo').css({
        color: '#0f0',
        'font-size': '2rem',
        'font-family': '微軟正黑體',
    });
});

顯示結果：

看起來寫法好像也很複雜，不過和 JavaScript 相比，其實已經簡化很多了，這裡只是在最外層加入.on的語法，而裡面加入了上一小節的修改 CSS 的語法。

2.7 方法鏈串

一個按鈕需要做很多的事情，可以使用方法鏈串的方式來完成，簡單說就是只要呼叫一次 jQuery 便可以做很多的事情。舉例來說，現在我們想要在剛剛的監聽事件中再加上一個 Alert 事件，程式碼如下。

JavaScript：

$('.demo')
    .on('click', function () {
        $('.demo').css({
            color: '#0f0',
            'font-size': '2rem',
            'font-family': '微軟正黑體',
        });
    })
    .on('click', function () {
        alert('Hello World');
    });

顯示結果：

方法鏈串是很重要的寫法，務必留意。

三、動畫

jQuery 的強項之一就是處理動畫。在這個章節中我們要使用animate方法來實作動畫的效果。

animate語法：

.animate({
        CSS 製作動畫
    },
    動畫時間,
    'easing 種類',
    function(){
        動畫結束時的處理
    }
);

easing 種類。

1. linear：動畫的移動速度是固定的。
2. swing：更為流暢的速度變化。

移動文字的動畫效果實作，可以直接參考下列程式碼。

JavaScript：

$('.demo').animate(
    {
        width: '70%',
        opacity: 0.4,
        marginLeft: '0.6in',
        fontSize: '3em',
        borderWidth: '10px',
    },
    3000
);

顯示結果：

動畫效果有些屬性不能直接使用，像是color或是background-color等等，要使用擴充函式庫（jQuery UI）。這部分會是一個坑，要多加留意。

四、推薦資源

1. jQuery Tutorial - W3Schools
2. jQuery UI
3. jQuery Mobile
4. Easing Functions Cheat Sheet

五、結論

jQuery 的入門我是參考這本書，《邁向jQuery 達人的階梯》 和 jQuery 的官方文件來學習，不過 jQuery 官網寫的不怎麼好閱讀，建議可以先看書再看文件，會比較清楚官網在寫什麼。今天 jQuery 的入門先介紹這邊，下一篇會繼續 jQuery 下半部的用法，那麼今天的內容到這邊，謝謝收看！

話說，我好像都學到一些感覺快要消失的東西耶．．．

六、參考資料

1. jQuery is useless in 2022 - thelicato