前情提要
還在問說要不要學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
【前端動手玩創意】置頂按鈕，老梗經典｜帶你的網頁搭電梯
按讚的人：
熱門文章
同意，可以稍微學一下，不一定要導入使用～！