我愛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);
});

心得

JQ到底有沒有被拋棄或是需不需要學習，其實都是假議題，一堆人嘴上用JQ，然後嘴砲JQ 我們身為學習者其實就是花個一小時就能學起來的東西，沒必要故意閉著眼睛不去了解。以上，一篇文章馬上帶你學會JQuery！

比較想要玩切版可以看這個: https://ithelp.ithome.com.tw/articles/10312922 【前端動手玩創意】置頂按鈕，老梗經典｜帶你的網頁搭電梯

3個讚 1留言 430瀏覽

按讚的人：

共有 1 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

站長阿川 9個月前

同意，可以稍微學一下，不一定要導入使用～！

1個讚回覆

按讚的人：

留言......

我愛JS

此人尚未填寫簡介。