Day 2 - 為什麼要用 jQuery - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 2

Modern Web

前端技能樹的十萬個為什麼系列第 2 篇

Day 2 - 為什麼要用 jQuery

14th鐵人賽 jquery library why

ycchiuuuu

2022-09-17 13:38:05

2201 瀏覽

分享至

前言

今天的主角是 jQuery

很多人看到 jQuery 會直接聯想到「落伍」的老科技，甚至搞不好最近才開始學前端的人，會連這個名詞都沒聽過。

雖然現在 jQuery 的討論熱度大不如前，但能夠橫掃十幾年前端界的 jQuery，你是否曾好奇過它到底強在哪？

先想一下

jQuery 是在什麼樣的時代誕生的？
jQuery 怎麼解決問題？
jQuery 的優缺點是什麼？
jQuery 適合什麼情境？

jQuery 是在什麼樣的時代誕生的？

在沒有 jQuery 的時代，網頁其實還是很單純的，比起現在隨便就是電商、網頁遊戲、SaaS 等高互動性的網站，還記得以前的網頁都是什麼類型嗎？

史萊姆的第一個家 (居然還在啊感動!!! 還特別保留了古早味的版本)

奇摩家族

無名小站

網路時代剛興起的時代，這種論壇、相簿、形象官網等類型的網站充斥在線上，互動性比較低，比較單方向地將資訊與資源呈現給使用者，從使用者的角度，頂多做到註冊、留言、搜尋等動作。

某種程度上來說，前端要做的事情不多，將後端給的資料與畫面呈現出來即可，也不太會有畫面局部刷新、動態變化等，在這個情況下，開發者處理的通常是「死」的資料，丟到畫面上能看就好。

當然，此時手機上網也不是大宗，沒有什麼 RWD 的概念。

需求慢慢增加

隨著時代與科技演進，前端的資料開始慢慢「活」了起來，開始有些互動操作，比如：

點了箭頭要展開
滾動到畫面底部要渲染更多內容
即時計算購物價格

RWD

同時，RWD 的需求也慢慢崛起，同樣的網頁在不同的手機平板裝置上，該如何不跑版，並且符合小裝置的視覺習慣。

相容性

以及最可怕的，同樣的網頁在不同的瀏覽器上，會有相容性的問題，往往需要為了特定瀏覽器，多寫幾個 switch case 去判斷，甚至即便是同一個瀏覽器，不同版號有時也是天差地別，堪稱是工程師噩夢QQ

jQuery 怎麼解決問題？

jQuery is a fast, small, and feature-rich JavaScript library.

沒錯，jQuery 不是程式語言，也不是前端框架(framework)，它是 library！

jQuery 是 JavaScript 的第三方函式庫，引用 jQuery 之後，就可以使用裡面大量的函式，其中大多數是關於選取、操作 HTML DOM 節點，以及衍伸出來的 CSS 樣式設定。

最廣為人知的就是 jQuery 的選擇器，也就是那個錢字號($)：

// JavaScript
document.getElementById("ID") // 因為只會取得一個節點，所以 getElement 沒有 s
document.getElementsByClassName("className") // 注意到語法比上面那行多一個 s

// jQuery
$("#ID")
$(".className") // 無論 ID 還是 className 都是回傳一個 List，較一致

除了大幅減少冗長又沒什麼規律的語法，jQuery 選擇器比照 CSS selector 的語法，用 # 代表選取 id，用 . 代表選取 class name，立刻得到設計師族群青睞！jQuery 加 10 分 !

後來原生的 JavaScript 也是有像這種語法：

// JavaScript
document.querySelector("#ID")
document.querySelectorAll(".className")

雖然也是用 CSS selector，不過一樣冗長，且一個回傳 DOM 節點，另一個則是 NodeList，這點不一致不免還是要花精力去記憶。

另外，更厲害的是 jQuery 具有 chain 的特性，由於每次執行 jQuery 的函式，大多都會回傳 jQuery 的物件，因此可以像鎖鏈一樣串接，再度拿這個回傳的物件去執行下一個 jQuery 函式，要選取 children、parent、sibilings 節點都是易如反掌。

有了這麼方便的選擇器，選到 DOM 節點之後，當然就很好對畫面上的元素進行一些修改，例如像這樣：

$( "ul.level-2" ).children().css( "background-color", "red" );

會發現 jQuery 的語法整句串下來，非常容易解讀，沒什麼贅字，甚至沒寫過的人，光用看的搞不好都可以猜意思。

其他更厲害的語法就不多說了，用法簡單到，在當時完全是設計師跳來前端的新手村，甚至很容易搞混以為 jQuery 的寫法就是 JavaScript XD

$.each 的寫法很像我們現在在用的 forEach

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

$.ajax 的寫法有夠簡潔，比起更古早的 XMLHttpRequest

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
    // Request complete.
});

// 我已經無法直視以前的 XMLHttpRequest 了...

const result = document.querySelector('.result');
function reqOnload () {
  const data = JSON.parse(this.responseText);
  var email = data.results[0].email;
  result.textContent = email;
}
function reqError (err) {
  console.log('錯誤', err)
}
// 宣告一個 XHR 的物件
var request = new XMLHttpRequest(); 
// 定義連線方式
request.open('get', 'https://randomuser.me/api/', true);
// 送出請求
request.send();
// 如果成功就執行 reqOnload()
request.onload = reqOnload; 
// 失敗就 reqError()
request.onerror = reqError;

$.click、$.animate 都是使用者與頁面互動的利器

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});