剩下的天數決定來介紹一些框架!

在學習JavaScript的過程中，你可能會聽到一個名字反覆出現，就是jQuery
雖然今天的前端世界React、Vue、Angular等框架佔據，但在它們出現之前，jQuery幾乎就是前端開發的代名詞
今天這篇，我們就來聊聊 jQuery 是什麼、為什麼它曾經這麼重要，以及它在現代開發中的定位。

1.jQuery是什麼？

jQuery是一個用JavaScript寫成的函式庫，誕生於2006年，由John Resig開發
尤其在早期各瀏覽器（IE、Firefox、Chrome）差異很大的年代，jQuery提供了統一的介面，讓程式碼一次撰寫，到處執行

在jQuery出現之前，如果你想改變一個網頁的內容、處理事件或操作CSS，常常需要寫一堆繁瑣又不兼容的程式。
舉個例子：

// 傳統 JavaScript：點擊按鈕改變文字
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  document.getElementById("text").innerText = "Hello!";
});

在jQuery裡，只要這樣：

$("#btn").click(function() {
  $("#text").text("Hello!");
});

jQuery讓DOM操作、事件綁定、動畫效果和AJAX都變得超簡單!

2.如何引入jQuery？

有兩個方法
一個是使用CDN（線上載入）：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

或是下載jQuery檔案放到專案中：

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

引入之後，你就能在網頁中使用$這個神奇的符號來呼叫jQuery

3.基本語法快速看

jQuery 的核心是 $() 函式，通常用來「選取」元素，類似於 document.querySelector()

選取元素

$("p")           // 選取所有 <p> 標籤
$("#title")      // 選取 id="title" 的元素
$(".btn")        // 選取 class="btn" 的所有元素

修改內容

$("#title").text("Hello jQuery!");
$(".box").html("<b>加粗文字</b>");

修改樣式

$("p").css("color", "red");

事件監聽

$("#btn").click(function() {
  alert("你按下按鈕了！");
});

動畫效果

$(".box").fadeOut(1000);  // 淡出動畫
$(".box").slideToggle();  // 開合效果

4.AJAX

jQuery讓發送HTTP請求（例如取得 API 資料）變得超容易

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1",
  method: "GET",
  success: function(data) {
    console.log("取得資料：", data);
  },
  error: function() {
    console.error("請求失敗！");
  }
});

這在沒有 Fetch API 的年代，是前端開發者的救星

5.jQuery 在現代的地位

隨著ES6語法、Fetch API、querySelector和現代框架的出現，許多jQuery的功能在原生JavaScript中就已經能輕鬆達成，例如：

// jQuery
$("#btn").click(() => alert("Hi!"));

// 原生 JS
document.querySelector("#btn").addEventListener("click", () => alert("Hi!"));

不過，在一些舊專案或輕量網站中，jQuery 仍然相當實用
它也被許多老牌外掛（像是Bootstrap3）依賴，所以你仍然會看到它的身影

6.總結

現在jQuery雖然比較退流行了，但小型網頁互動、活動頁、快速原型開發或是老專案的部分都還是會用到，讓初學者練習DOM操作與事件還是很方便喔