阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

我愛JS · 07月26日

[技術文章] 一篇文章馬上帶你學會JQuery！

前情提要

還在問說要不要學JQUERY？別問了，學就對了，沒人說學了一定要用好嗎。

以下讓我們先看一段純純的JS，就跟國中生的戀愛一樣，
牽牽小手，超純。

JS純


// 純 JavaScript 選取元素清單
let list = document.querySelectorAll(".navigation li");

function activeLink(event) {
  // 使用 forEach 迴圈移除所有元素的 "hovered" 類別
  list.forEach((item) => {
    item.classList.remove("hovered");
  });
  // 在滑鼠移過的元素上新增 "hovered" 類別
  event.target.classList.add("hovered");
}

// 使用 forEach 迴圈為每個元素加上滑鼠移過事件的監聽器
list.forEach((item) => {
  item.addEventListener("mouseover", activeLink);
});

轉大人

接下來我們要轉大人了。

選擇器

關於querySelectorAll這種querySelector很簡單，JQ都是用$這個字符來選取。

修改class

item.classList.remove("hovered");
event.target.classList.add("hovered");

這兩個的話JQ有寫出兩隻API：
removeClass
addClass

所以很方便很好用

事件監聽

addEventListener的話JQ則是用on來表達，這個看過幾次就能夠理解了唷！

JQ的寫法寫出來

// 使用 jQuery 選取元素清單
let list = $(".navigation li");

function activeLink() {
  // 移除所有元素的 "hovered" 類別
  list.removeClass("hovered");
  // 在滑鼠移過的元素上新增 "hovered" 類別
  $(this).addClass("hovered");
}

// 使用 jQuery 的 each 方法為每個元素加上滑鼠移過事件的監聽器
list.each(function () {
  $(this).on("mouseover", activeLink);
});