如何從 jQuery 轉換到原生 JS 語法

從 jQuery 轉換到原生 JS 的重要性可以從幾個方面來解釋：

1. 性能優化：原生 JS 比起依賴於 jQuery 的程式碼，通常會有更好的性能。這是因為原生 JS 直接與瀏覽器的 API 互動，沒有額外的抽象層，這減少了執行時間和記憶體使用。

2. 現代瀏覽器的改進：過去，jQuery 是很受歡迎的，主要是因為它能夠解決跨瀏覽器的兼容性問題。但隨著時間的推移，現代瀏覽器已經大幅改進，許多原生 JS API 現在在主流瀏覽器中都有很好的支援，這使得直接使用原生 JS 變得更加可行。

3. 學習和理解底層：了解原生 JS 對於任何前端開發者來說都是一項重要的技能。它不僅僅是學習語法，更是理解 JavaScript 如何工作的基礎。這對於深入了解程式語言和瀏覽器的運作方式非常重要。

4. 依賴性減少：使用原生 JS 可以減少對第三方庫的依賴。這意味著程式碼更加獨立，避免了因為依賴的庫不再維護或更新而造成的風險。

5. 現代框架和工具鏈：現代的前端開發趨勢是使用如 React、Vue 或 Angular 這樣的框架，這些框架大多基於原生 JS 和新的網頁標準。因此，掌握原生 JS 對於使用這些現代工具非常有幫助。

學習和使用原生 JavaScript 是為了提高性能，與現代瀏覽器和框架保持一致，減少外部依賴，並深入理解 JavaScript 的工作原理。這些都是對前端開發者而言非常重要的。

選擇器 Selector

1. ID 選擇器

效果說明

使用 jQuery 和原生 JavaScript 選擇具有特定 ID（”myElement”）的元素，並將其文字內容更改為 “哇！這個盒子變成了火箭！”，然後將文字顏色設定為紅色。

使用 jQuery 實現

$("#myElement").html("哇！這個盒子變成了火箭！");
$("#myElement").css("color", "red");

使用原生 JavaScript 實現

var element = document.getElementById("myElement");
element.innerHTML = "哇！這個盒子變成了火箭！";
element.style.color = "red";

詳細說明

• 使用 jQuery，我們使用 $() 函數來選擇 ID 為 “myElement” 的元素，然後使用 .html() 方法來設定內容，使用 .css() 方法來設定文字顏色。
• 使用原生 JavaScript，我們使用 document.getElementById("myElement") 來選擇具有特定 ID 的元素，然後使用 .innerHTML 屬性來設定內容，使用 .style.color 屬性來設定文字顏色。

Class 選擇器

效果說明

使用 jQuery 和原生 JavaScript 選擇所有帶有 “myClass” 類別的元素，將它們的文字內容更改為 “大家都變成了魔法師！”，然後將它們的背景顏色設定為黃色。

使用 jQuery 實現

$(".myClass").html("大家都變成了魔法師！");
$(".myClass").css("background-color", "yellow");

使用原生 JavaScript 實現

var elements = document.querySelectorAll(".myClass");
elements.forEach(function(element) {
    element.innerHTML = "大家都變成了魔法師！";
    element.style.backgroundColor = "yellow";
});

詳細說明

• 使用 jQuery，我們使用 $() 函數來選擇具有 “myClass” 類別的所有元素，然後使用 .html() 方法來設定內容，使用 .css() 方法來設定背景顏色。
• 使用原生 JavaScript，我們使用 document.querySelectorAll(".myClass") 來選擇所有帶有特定類別的元素，然後使用 .forEach() 方法遍歷它們，對每個元素使用 .innerHTML 屬性來設定內容，使用 .style.backgroundColor 屬性來設定背景顏色。

元素選擇器

效果說明

使用 jQuery 和原生 JavaScript 選擇所有 <p> 元素，將它們的文字內容更改為 “咦，我變成了魔法書！”，並加入點擊事件監聽器，以在點擊時顯示警示框以顯示秘密資料。

使用 jQuery 實現

$("p").html("咦，我變成了魔法書！");
$("p").click(function() {
    alert("快看，這個魔法書有秘密！");
});

使用原生 JavaScript 實現

var paragraphs = document.querySelectorAll("p");
paragraphs.forEach(function(paragraph) {
    paragraph.innerHTML = "咦，我變成了魔法書！";

    paragraph.addEventListener("click", function() {
        alert("快看，這個魔法書有秘密！");
    });
});

詳細說明

• 使用 jQuery，我們使用 $() 函數來選擇所有 <p> 元素，然後使用 .html() 方法來設定內容，使用 .click() 方法加入點擊事件監聽器。
• 使用原生 JavaScript，我們使用 document.querySelectorAll("p") 來選擇所有指定元素，然後使用 .forEach() 方法遍歷它們，對每個元素使用 .innerHTML 屬性來設定內容，並使用 .addEventListener() 方法加入點擊事件監聽器。

事件 Event

以下是針對每個效果的詳細解釋和範例程式碼

滑鼠事件，點擊 (click) 與連續兩次點擊 (dblclick)

效果說明

• 使用 jQuery 實現點擊一次元素時觸發單擊事件，連續兩次點擊時觸發雙擊事件。
• 使用原生 JavaScript 實現點擊一次元素時觸發單擊事件，連續兩次點擊時觸發雙擊事件。

使用 jQuery 實現

// 單擊事件
$("#myElement").click(function() {
    alert("單擊事件發生！");
});

// 雙擊事件
$("#myElement").dblclick(function() {
    alert("雙擊事件發生！");
});

使用原生 JavaScript 實現

var element = document.getElementById("myElement");
var clicks = 0;

// 單擊事件
element.addEventListener("click", function() {
    clicks++;
    if (clicks === 2) {
        alert("雙擊事件發生！");
        clicks = 0;
    }
});

// 防止連續單擊事件
element.addEventListener("dblclick", function(event) {
    event.preventDefault();
});

詳細說明

• 使用 jQuery，我們使用 .click() 和 .dblclick() 方法來加入單擊和雙擊事件的監聽器。
• 使用原生 JavaScript，我們使用 .addEventListener() 來加入單擊事件的監聽器，並使用變數 clicks 來追蹤點擊次數，以實現連續兩次點擊事件。為了防止連續單擊事件，我們還阻止了雙擊事件的預設行為。

滑鼠事件，移入 (mouseenter) 與移出(mouseout)

效果說明

• 使用 jQuery 實現當滑鼠移入元素時觸發移入事件，當滑鼠移出元素時觸發移出事件。
• 使用原生 JavaScript 實現當滑鼠移入元素時觸發移入事件，當滑鼠移出元素時觸發移出事件。

使用 jQuery 實現

// 移入事件
$("#myElement").mouseenter(function() {
    alert("滑鼠移入事件發生！");
});

// 移出事件
$("#myElement").mouseout(function() {
    alert("滑鼠移出事件發生！");
});

使用原生 JavaScript 實現

var element = document.getElementById("myElement");

// 移入事件
element.addEventListener("mouseenter", function() {
    alert("滑鼠移入事件發生！");
});

// 移出事件
element.addEventListener("mouseout", function() {
    alert("滑鼠移出事件發生！");
});

詳細說明

• 使用 jQuery，我們使用 .mouseenter() 和 .mouseout() 方法來加入滑鼠移入和移出事件的監聽器。
• 使用原生 JavaScript，我們使用 .addEventListener() 來加入 mouseenter 和 mouseout 事件的監聽器。

如何在 vscode 中快速產生 ready code snippet

對於在 Visual Studio Code (VSCode) 中快速生成 ready 事件程式碼塊，無論是使用 jQuery 還是原生 JavaScript，都有相應的方法

使用 jQuery 實現

在 VSCode 中輸入 “ready” 並按下 Tab 鍵，即可生成 ready 事件程式碼塊。VSCode 會自動識別你想要使用 jQuery 的 ready 函數，然後生成以下程式碼

$(document).ready(function() {
    // 在這裡放置你的程式碼
});

使用原生 JavaScript 實現

VSCode 也可以自動生成 DOMContentLoaded 事件的程式碼塊，無需特殊程式碼。

只需在 HTML 文件中輸入以下部分

<script>
document.addEventListener("DOMContentLoaded", function() {
    // 在這裡放置你的程式碼
});
</script>

當你輸入上述部分時，VSCode 通常會自動提供提示，讓你輕鬆生成 DOMContentLoaded 事件程式碼塊。

這樣，無論你是使用 jQuery 還是原生 JavaScript，都可以輕鬆生成 ready 事件程式碼塊，以確保在 DOM 完全就緒時執行你的 JavaScript 程式碼。

詳細說明

• 在 VSCode 中，當你輸入 “ready” 並按下 Tab 鍵，它會自動生成 ready 事件的程式碼塊，不論是使用 jQuery 還是原生 JavaScript。

我們怎麼知道 DOM 是否已經就緒 - 使用 ready

效果說明

• 使用 jQuery 實現使用 ready 函數確保 DOM 已經就緒並可以操作。
• 使用原生 JavaScript 實現使用 DOMContentLoaded 事件確保 DOM 已經就緒並可以操作。

使用 jQuery 實現

$(document).ready(function() {
    // 在這裡放置你的程式碼
});

使用原生 JavaScript 實現

document.addEventListener("DOMContentLoaded", function() {
    // 在這裡放置你的程式碼
});

詳細說明

• 使用 jQuery，我們使用 $(document).ready() 來確保文件已經完全加載並且 DOM 可以被操縱。

滑鼠的 hover 事件

效果說明

• 當滑鼠移入元素時，將改變元素的外觀（例如，改變背景顏色）。
• 當滑鼠移出元素時，恢復元素的初始外觀。

使用 jQuery 實現

$(document).ready(function() {
    $("#myElement").hover(
        function() {
            // 滑鼠移入事件
            $(this).css("background-color", "yellow");
        },
        function() {
            // 滑鼠移出事件
            $(this).css("background-color", ""); // 恢復初始背景顏色
        }
    );
});

使用原生 JavaScript 實現

document.addEventListener("DOMContentLoaded", function() {
    var element = document.getElementById("myElement");

    element.addEventListener("mouseenter", function() {
        // 滑鼠移入事件
        this.style.backgroundColor = "yellow";
    });

    element.addEventListener("mouseleave", function() {
        // 滑鼠移出事件
        this.style.backgroundColor = ""; // 恢復初始背景顏色
    });
});

詳細說明

• 使用 jQuery，我們使用 .hover() 方法，接受兩個函數作為參數，第一個函數處理滑鼠移入事件，第二個函數處理滑鼠移出事件。
• 使用原生 JavaScript，我們使用 .addEventListener() 來加入 mouseenter 和 mouseleave 事件的監聽器，分別處理滑鼠移入和移出事件。

如果遇到沒看過的滑鼠事件該怎麼辦

效果說明

• 學習如何處理未知的滑鼠事件。

使用 jQuery 實現

$(document).ready(function() {
    $("#myElement").on("unknownMouseEvent", function(event) {
        alert("未知的滑鼠事件發生" + event.type);
    });
});

使用原生 JavaScript 實現

document.addEventListener("DOMContentLoaded", function() {
    var element = document.getElementById("myElement");

    element.addEventListener("unknownMouseEvent", function(event) {
        alert("未知的滑鼠事件發生" + event.type);
    });
});

詳細說明

• 無論是 jQuery 還是原生 JavaScript，你都可以加入一個事件監聽器來處理滑鼠事件。當發生未知的滑鼠事件時，你可以使用 event.type 屬性來獲取事件的類型並進行處理。

on(‘click’, ..) 與 click() 是等價的

效果說明

• 介紹 on('click', ...) 和 click(...) 方法之間的等價性。

使用 jQuery 實現

$(document).ready(function() {
    $("#myElement").on("click", function() {
        alert("使用 on 方法處理點擊事件！");
    });

    $("#myElement2").click(function() {
        alert("使用 click 方法處理點擊事件！");
    });
});

使用原生 JavaScript 實現

document.addEventListener("DOMContentLoaded", function() {
    var element = document.getElementById("myElement");
    var element2 = document.getElementById("myElement2");

    element.addEventListener("click", function() {
        alert("使用 addEventListener 方法處理點擊事件！");
    });

    element2.addEventListener("click", function() {
        alert("使用 addEventListener 方法處理點擊事件！");
    });
});

詳細說明

• 在 jQuery 中，on('click', ...) 和 click(...) 方法都用於處理點擊事件，它們是等價的。你可以選擇使用其中之一，根據你的喜好和程式碼風格。
• 在原生 JavaScript 中，我們使用 addEventListener("click", ...) 來處理點擊事件。同樣，你可以根據個人偏好選擇不同的方法。

這些範例展示了如何使用 jQuery 和原生 JavaScript 實現不同滑鼠事件以及處理未知事件。同時，它們還強調了 on('click', ...) 和 click(...) 方法之間的等價性。

Traversal

選擇器的進階 Traversal - 鄰居、爸爸與小孩

效果說明

• 學習如何使用 Traversal 選擇器獲取元素的鄰居、父元素和子元素。

使用 jQuery 實現

// 選擇 ID 為 "myElement" 的元素的下一個兄弟元素
var nextSibling = $("#myElement").next();

// 選擇 ID 為 "myElement" 的元素的父元素
var parentElement = $("#myElement").parent();

// 選擇 ID 為 "myElement" 的元素的所有子元素
var childElements = $("#myElement").children();

• 使用 jQuery，我們可以使用 .next() 選擇下一個兄弟元素，使用 .parent() 選擇父元素，使用 .children() 選擇所有子元素。
• 使用原生 JavaScript，我們使用 .nextElementSibling 屬性選擇下一個兄弟元素，使用 .parentElement 屬性選擇父元素，使用 .children 屬性選擇所有子元素。

使用原生 JavaScript 實現

以下是如何使用原生 JavaScript 將 jQuery 程式碼進行重寫

// 選擇 ID 為 "myElement" 的元素的下一個兄弟元素
var myElement = document.getElementById("myElement");
var nextSibling = myElement.nextElementSibling;

// 選擇 ID 為 "myElement" 的元素的父元素
var parentElement = myElement.parentElement;

// 選擇 ID 為 "myElement" 的元素的所有子元素
var childElements = Array.from(myElement.children);

詳細說明

1. 選擇 ID 為 “myElement” 的元素的下一個兄弟元素

   • 我們首先使用 document.getElementById("myElement") 來選擇具有 ID 為 “myElement” 的元素，將其存儲在 myElement 變數中。
   • 然後，使用 myElement.nextElementSibling 可以獲取 myElement 元素的下一個兄弟元素，實現了與 $("#myElement").next() 類似的效果。

2. 選擇 ID 為 “myElement” 的元素的父元素

   • 我們直接使用 myElement.parentElement 可以獲取 myElement 元素的父元素，實現了與 $("#myElement").parent() 類似的效果。

3. 選擇 ID 為 “myElement” 的元素的所有子元素

   • 我們首先使用 document.getElementById("myElement") 來選擇具有 ID 為 “myElement” 的元素，將其存儲在 myElement 變數中。
   • 然後，使用 myElement.children 可以獲取 myElement 元素的所有子元素，但它返回的是一個 HTMLCollection，我們使用 Array.from() 將其轉換為數組，這樣就實現了與 $("#myElement").children() 類似的效果。

jQuery 中怎麼找爸爸，怎麼找孩子

效果說明

• 學習如何使用 jQuery 找到元素的父元素和子元素。

使用 jQuery 實現

// 使用 .parent() 找到元素的父元素
var parentElement = $("#myElement").parent();

// 使用 .children() 找到元素的所有子元素
var childElements = $("#myElement").children();

使用原生 JavaScript 實現

以下是如何使用原生 JavaScript 將 jQuery 程式碼進行重寫

// 使用 .parent() 找到元素的父元素
var myElement = document.getElementById("myElement");
var parentElement = myElement.parentElement;

// 使用 .children() 找到元素的所有子元素
var childElements = Array.from(myElement.children);

詳細說明

1. 使用 .parent() 找到元素的父元素

   • 我們首先使用 document.getElementById("myElement") 來選擇具有 ID 為 “myElement” 的元素，將其存儲在 myElement 變數中。
   • 然後，使用 myElement.parentElement 可以獲取 myElement 元素的父元素，實現了與 $("#myElement").parent() 類似的效果。

2. 使用 .children() 找到元素的所有子元素

   • 我們首先使用 document.getElementById("myElement") 來選擇具有 ID 為 “myElement” 的元素，將其存儲在 myElement 變數中。
   • 然後，使用 myElement.children 可以獲取 myElement 元素的所有子元素，但它返回的是一個 HTMLCollection，我們使用 Array.from() 將其轉換為數組，這樣就實現了與 $("#myElement").children() 類似的效果。

parant(), parents(), parentsUntil() 的差異

效果說明

我們將探討 jQuery 中的 parent()、parents() 和 parentsUntil() 這三個方法之間的差別以及它們的使用情況。

使用 jQuery 實現

• 使用 parent() 方法選擇元素的直接父元素。
• 使用 parents() 方法選擇元素的所有祖先元素。
• 使用 parentsUntil() 方法選擇元素的祖先元素，直到特定的祖先元素為止。

// 使用 parent() 選擇元素的直接父元素
var directParent = $("#myElement").parent();

// 使用 parents() 選擇元素的所有祖先元素
var allAncestors = $("#myElement").parents();

// 使用 parentsUntil() 選擇元素的祖先元素，直到特定祖先元素為止
var ancestorsUntil = $("#myElement").parentsUntil("#container");

使用原生 JavaScript 實現

我們將使用原生 JavaScript 來模擬這三個 jQuery 方法的功能。

// 使用原生 JavaScript 實現 parent() 方法選擇元素的直接父元素
var directParent = document.getElementById("myElement").parentNode;

// 使用原生 JavaScript 實現 parents() 方法選擇元素的所有祖先元素
var allAncestors = [];
var currentNode = document.getElementById("myElement").parentNode;

while (currentNode) {
    allAncestors.push(currentNode);
    currentNode = currentNode.parentNode;
}

// 使用原生 JavaScript 實現 parentsUntil() 方法選擇元素的祖先元素，直到特定的祖先元素為止
var containerElement = document.getElementById("container");
var ancestorsUntil = [];
currentNode = document.getElementById("myElement").parentNode;

while (currentNode && currentNode !== containerElement) {
    ancestorsUntil.push(currentNode);
    currentNode = currentNode.parentNode;
}

詳細說明

• parent() 方法選擇元素的直接父元素，它返回一個包含一個元素的 jQuery 對象。
• parents() 方法選擇元素的所有祖先元素，它返回一個包含所有祖先元素的 jQuery 對象。
• parentsUntil() 方法選擇元素的祖先元素，直到特定的祖先元素為止，它返回一個包含符合條件的祖先元素的 jQuery 對象。

在原生 JavaScript 中，我們使用 parentNode 屬性來獲取元素的父元素，並使用循環來模擬 parents() 和 parentsUntil() 方法的功能。 parentsUntil() 方法需要額外的條件檢查來確保選擇的祖先元素在特定的祖先元素之前停止。

Traversal: first(), last(), find()

效果說明

我們想要實現在 DOM 中使用 jQuery 或原生 JavaScript 來執行三個不同的選擇操作：first()、last() 和 find()。

使用 jQuery 實現

使用 jQuery，我們可以輕鬆實現這些選擇操作：

// 使用 first() 選取第一個匹配的元素
var firstElement = $("p").first();

// 使用 last() 選取最後一個匹配的元素
var lastElement = $("p").last();

// 使用 find() 選取子元素中匹配的元素
var foundElements = $("div").find(".child");

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 使用 first() 選取第一個匹配的元素
var firstElement = document.querySelector("p");

// 使用 last() 選取最後一個匹配的元素
var allParagraphs = document.querySelectorAll("p");
var lastElement = allParagraphs[allParagraphs.length - 1];

// 使用 find() 選取子元素中匹配的元素
var parentElement = document.querySelector("div");
var foundElements = parentElement.querySelectorAll(".child");

詳細說明

• 使用 jQuery 的 first() 方法可以輕鬆地選取第一個匹配的元素。它返回一個 jQuery 對象，可以進一步處理。
• 同樣地，last() 方法用於選取最後一個匹配的元素。
• find() 方法可用於在選定的元素內查找所有匹配的子元素。在這個案例中，我們使用它來在 div 元素中查找所有具有 .child 類的子元素。

在原生 JavaScript 中，我們使用 querySelector() 方法來選取第一個匹配的元素，使用 querySelectorAll() 方法來選取所有匹配的元素。通過簡單的索引操作，我們可以獲取最後一個元素。對於 find() 的操作，我們首先選擇父元素，然後使用 querySelectorAll() 來選擇所有子元素，再進行過濾。這些方法可以讓你以原生 JavaScript 方式實現與 jQuery 相同的選擇操作。

Traversal: eq(), filter(), not()

效果說明

我們想要實現在 DOM 中使用 jQuery 或原生 JavaScript 來執行三個不同的選擇操作：eq()、filter() 和 not()。

使用 jQuery 實現

使用 jQuery，我們可以輕鬆實現這些選擇操作：

// 使用 eq() 選取特定索引位置的元素
var specificElement = $("p").eq(2); // 選取第三個 <p> 元素（索引從 0 開始）

// 使用 filter() 選取符合特定條件的元素
var filteredElements = $("div").filter(".special"); // 選取具有 .special 類的 <div> 元素

// 使用 not() 選取不符合特定條件的元素
var notElements = $("p").not(".exclude"); // 選取不具有 .exclude 類的 <p> 元素

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 使用 eq() 選取特定索引位置的元素
var allParagraphs = document.querySelectorAll("p");
var specificElement = allParagraphs[2]; // 選取第三個 <p> 元素（索引從 0 開始）

// 使用 filter() 選取符合特定條件的元素
var allDivs = document.querySelectorAll("div");
var filteredElements = Array.from(allDivs).filter(function(element) {
    return element.classList.contains("special");
});

// 使用 not() 選取不符合特定條件的元素
var allParagraphs = document.querySelectorAll("p");
var notElements = Array.from(allParagraphs).filter(function(element) {
    return !element.classList.contains("exclude");
});

詳細說明

• 使用 jQuery 的 eq() 方法可以輕鬆地選取特定索引位置的元素。注意，索引從 0 開始，所以 eq(2) 選取的是第三個元素。
• filter() 方法用於選取符合特定條件的元素，並返回一個新的 jQuery 對象。在原生 JavaScript 中，我們需要使用 querySelectorAll() 來選取所有元素，然後使用 filter() 方法對元素進行過濾，最後轉換成陣列進行處理。
• not() 方法用於選取不符合特定條件的元素，並返回一個新的 jQuery 對象。在原生 JavaScript 中，我們使用 querySelectorAll() 來選取所有元素，然後使用 filter() 方法對元素進行過濾，這次選取不符合特定條件的元素。這些方法可以讓你以原生 JavaScript 方式實現與 jQuery 相同的選擇操作。

特效類

特效類 API: hide() 與 show()

效果說明

我們想要實現在 DOM 中使用 jQuery 或原生 JavaScript 來執行元素的隱藏 hide() 和顯示 show() 操作。

使用 jQuery 實現

使用 jQuery，我們可以輕鬆實現隱藏和顯示元素的效果：

// 隱藏元素
$("button#hide-button").click(function(){
    $("p").hide(); // 將所有 <p> 元素隱藏
});

// 顯示元素
$("button#show-button").click(function(){
    $("p").show(); // 顯示所有 <p> 元素
});

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 隱藏元素
document.querySelector("button#hide-button").addEventListener("click", function(){
    var paragraphs = document.querySelectorAll("p");
    for (var i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.display = "none";
    }
});

// 顯示元素
document.querySelector("button#show-button").addEventListener("click", function(){
    var paragraphs = document.querySelectorAll("p");
    for (var i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.display = "block";
    }
});

詳細說明

• 使用 jQuery 的 hide() 方法可以隱藏選定的元素，而 show() 方法則用於顯示它們。這些方法可以輕鬆地在單擊按鈕等事件觸發時實現元素的隱藏和顯示。
• 在原生 JavaScript 中，我們首先使用 querySelector() 方法來選取按鈕元素，然後使用 addEventListener() 方法來加入點擊事件的監聽器。當按鈕被點擊時，我們使用 querySelectorAll() 來選取所有需要隱藏或顯示的元素，然後使用遍歷的方式設置它們的 style.display 屬性，來達到隱藏或顯示的效果。這樣就實現了與 jQuery 中 hide() 和 show() 方法相同的效果。

Callback 回調函式

效果說明

我們想要實現在 DOM 操作中使用回調函式 (callback function) 的效果。這將允許我們在元素被操作後執行其他操作，例如在元素淡出 (fade out) 後執行某些程式碼。

使用 jQuery 實現

使用 jQuery，我們可以使用回調函式 (callback function) 來實現這一效果：

// 使用回調函式實現淡出效果
$("button#fade-out-button").click(function(){
    $("p").fadeOut("slow", function(){
        // 在淡出完成後執行的程式碼
        alert("段落已經淡出了！");
    });
});

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 使用回調函式實現淡出效果
document.querySelector("button#fade-out-button").addEventListener("click", function(){
    var paragraphs = document.querySelectorAll("p");
    var fadeDuration = 1000; // 淡出時間，以毫秒為單位
    var interval = 50; // 更新間隔，以毫秒為單位

    var fadeOut = function(element, callback) {
        var opacity = 1;
        var timer = setInterval(function(){
            if (opacity <= 0) {
                clearInterval(timer);
                element.style.display = "none"; // 隱藏元素
                if (typeof callback === "function") {
                    callback(); // 執行回調函式
                }
            } else {
                opacity -= 50 / fadeDuration; // 更新不透明度
                element.style.opacity = opacity;
            }
        }, interval);
    };

    // 淡出所有段落
    for (var i = 0; i < paragraphs.length; i++) {
        fadeOut(paragraphs[i], function(){
            // 在淡出完成後執行的程式碼
            alert("段落已經淡出了！");
        });
    }
});

詳細說明

• 在 jQuery 中，我們可以使用 fadeOut() 方法來實現淡出效果，並在函式的第二個參數中傳遞回調函式 (callback function)。回調函式將在淡出效果完成後執行。
• 在原生 JavaScript 中，我們首先選取按鈕元素，然後使用 addEventListener() 方法加入點擊事件的監聽器。當按鈕被點擊時，我們遍歷所有段落元素，並使用 fadeOut() 函式實現淡出效果。該函式使用 setInterval() 定期更新元素的不透明度，直到不透明度達到 0 為止，然後執行回調函式以觸發在淡出完成後執行的程式碼。這樣就實現了與 jQuery 中 fadeOut() 方法相同的效果，包括回調函式的功能。

方法鏈 (Method Chaining)

效果說明

我們想要實現在 DOM 操作中使用方法鏈 (Method Chaining) 的效果，這將允許我們連續對多個元素進行操作，而不必多次選擇它們。

使用 jQuery 實現

使用 jQuery，方法鏈 (Method Chaining) 是一種方便的方法，可以將多個操作連接在一起：

// 使用方法鏈來設置多個屬性
$("p")
    .css("color", "red")
    .addClass("highlight")
    .fadeOut("slow");

使用原生 JavaScript 實現

在原生 JavaScript 中，方法鏈 (Method Chaining) 需要更多的工作，但也是可行的：

// 使用原生 JavaScript 實現方法鏈
var paragraphs = document.querySelectorAll("p");
for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.color = "red";
    paragraphs[i].classList.add("highlight");
    fadeOut(paragraphs[i]);
}

// 淡出函式
function fadeOut(element) {
    var opacity = 1;
    var interval = 50; // 更新間隔，以毫秒為單位
    var fadeDuration = 1000; // 淡出時間，以毫秒為單位

    var timer = setInterval(function(){
        if (opacity <= 0) {
            clearInterval(timer);
        } else {
            opacity -= 50 / fadeDuration; // 更新不透明度
            element.style.opacity = opacity;
        }
    }, interval);
}

詳細說明

• 在 jQuery 中，方法鏈 (Method Chaining) 非常容易實現。只需將多個方法連接起來，每個方法返回的是 jQuery 對象，允許對同一組元素進行連續操作。
• 在原生 JavaScript 中，實現方法鏈需要手動對每個元素進行操作，並根據需要連續調用不同的函式。在上面的例子中，我們遍歷了所有的段落元素，設置它們的顏色、加入類名、以及調用 fadeOut() 函式來執行淡出效果。這樣可以實現與 jQuery 中方法鏈相似的效果，但需要更多的程式碼來達到同樣的目標。

特效類動畫: 使用 animate()

效果說明

我們想要實現在 DOM 中使用動畫效果，使元素以動畫方式改變位置或屬性。具體而言，我們希望將一個元素從左側移動到右側。

使用 jQuery 實現

使用 jQuery，我們可以使用 animate() 方法來實現這種簡單的動畫效果：

// 使用 animate() 實現元素移動
$("button#animate-button").click(function(){
    $("div#animated-box").animate({
        left: "200px" // 將 left 屬性從 0px 改變為 200px
    }, 1000); // 動畫持續 1 秒
});

使用原生 JavaScript 實現

在原生 JavaScript 中，實現動畫效果需要更多的程式碼和計時器：

// 使用原生 JavaScript 實現元素移動
document.querySelector("button#animate-button").addEventListener("click", function(){
    var animatedBox = document.querySelector("div#animated-box");
    var startPosition = 0;
    var endPosition = 200;
    var duration = 1000; // 動畫持續 1 秒
    var interval = 10; // 更新間隔，以毫秒為單位
    var distance = endPosition - startPosition;
    var steps = duration / interval;
    var stepSize = distance / steps;
    var currentStep = 0;

    var timer = setInterval(function(){
        if (currentStep>= steps) {
            clearInterval(timer);
        } else {
            startPosition += stepSize;
            animatedBox.style.left = startPosition + "px";
            currentStep++;
        }
    }, interval);
});

詳細說明

• 在 jQuery 中，我們使用 animate() 方法來實現動畫效果。該方法接受一個對象，其中包含要改變的屬性和相應的目標值。在這個例子中，我們改變 left 屬性，使元素從 0px 移動到 200px，動畫持續 1 秒。
• 在原生 JavaScript 中，實現動畫效果需要使用計時器。我們計算出每一步的變化量，然後使用 setInterval() 定期更新元素的位置，直到達到目標位置為止。這樣就實現了類似於 jQuery 中 animate() 方法的動畫效果，但需要更多的程式碼和計算。

淡入和淡出效果: 使用 fadeIn() 和 fadeOut()

效果說明

我們想實現在 DOM 中使用淡入 (fadeIn()) 和淡出 (fadeOut()) 效果，以使元素以漸變的方式顯示和隱藏。

使用 jQuery 實現

使用 jQuery，我們可以使用 fadeIn() 和 fadeOut() 方法來實現淡入和淡出效果：

// 使用 fadeIn() 實現淡入效果
$("button#fade-in-button").click(function(){
    $("div#fading-box").fadeIn("slow"); // 慢速淡入
});

// 使用 fadeOut() 實現淡出效果
$("button#fade-out-button").click(function(){
    $("div#fading-box").fadeOut("slow"); // 慢速淡出
});

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 使用原生 JavaScript 實現淡入效果
document.querySelector("button#fade-in-button").addEventListener("click", function(){
    var fadingBox = document.querySelector("div#fading-box");
    var opacity = 0;
    var interval = 50; // 更新間隔，以毫秒為單位
    var fadeDuration = 1000; // 淡入時間，以毫秒為單位

    var timer = setInterval(function(){
        if (opacity>= 1) {
            clearInterval(timer);
        } else {
            opacity += 50 / fadeDuration; // 更新不透明度
            fadingBox.style.opacity = opacity;
        }
    }, interval);

    fadingBox.style.display = "block"; // 顯示元素
});

// 使用原生 JavaScript 實現淡出效果
document.querySelector("button#fade-out-button").addEventListener("click", function(){
    var fadingBox = document.querySelector("div#fading-box");
    var opacity = 1;
    var interval = 50; // 更新間隔，以毫秒為單位
    var fadeDuration = 1000; // 淡出時間，以毫秒為單位

    var timer = setInterval(function(){
        if (opacity <= 0) {
            clearInterval(timer);
            fadingBox.style.display = "none"; // 隱藏元素
        } else {
            opacity -= 50 / fadeDuration; // 更新不透明度
            fadingBox.style.opacity = opacity;
        }
    }, interval);
});

詳細說明

• 在 jQuery 中，我們使用 fadeIn() 方法實現淡入效果，而使用 fadeOut() 方法實現淡出效果。可以指定動畫的速度，例如 “slow” 代表慢速。這些方法會自動處理不透明度和顯示 / 隱藏的細節，使元素以漸變的方式顯示和隱藏。
• 在原生 JavaScript 中，我們使用計時器和不透明度屬性來實現淡入和淡出效果。計時器定期更新元素的不透明度，從而實現漸變效果。在淡出完成後，我們使用 style.display 來控制元素的顯示狀態。這樣可以實現與 jQuery 中 fadeIn() 和 fadeOut() 方法相似的效果，但需要更多的程式碼和計算。

「取得」與「覆寫」值

屬性操作: 使用 attr()

效果說明

我們想要實現在 DOM 中使用 jQuery 或原生 JavaScript 來取得或改變元素的屬性。

使用 jQuery 實現

使用 jQuery，我們可以使用 attr() 方法來取得或改變元素的屬性：

// 取得元素的屬性值
var linkHref = $("a#my-link").attr("href");

// 改變元素的屬性值
$("img#my-image").attr("src", "new-image.jpg");

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 取得元素的屬性值
var linkElement = document.querySelector("a#my-link");
var linkHref = linkElement.getAttribute("href");

// 改變元素的屬性值
var imageElement = document.querySelector("img#my-image");
imageElement.setAttribute("src", "new-image.jpg");

詳細說明

• 在 jQuery 中，我們使用 attr() 方法來取得元素的屬性值或改變元素的屬性。第一個參數是要操作的屬性名稱，第二個參數是要設置的新值（如果是改變屬性的話）。
• 在原生 JavaScript 中，我們使用 getAttribute() 方法來取得元素的屬性值，並使用 setAttribute() 方法來改變元素的屬性。注意，原生 JavaScript 中需要明確指定要取得或改變的屬性名稱，而在 jQuery 中，屬性名稱作為參數傳遞給 attr() 方法。這樣可以實現相同的效果，但語法略有不同。

操作 DOM 內容: 使用 html()

效果說明

我們想要實現在 DOM 中使用 jQuery 或原生 JavaScript 來取得或修改元素的 HTML 內容。

使用 jQuery 實現

使用 jQuery，我們可以使用 html() 方法來取得或修改元素的 HTML 內容：

// 取得元素的 HTML 內容
var content = $("div#my-div").html();

// 修改元素的 HTML 內容
$("div#my-div").html("<p>New Content</p>");

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 取得元素的 HTML 內容
var divElement = document.querySelector("div#my-div");
var content = divElement.innerHTML;

// 修改元素的 HTML 內容
divElement.innerHTML = "<p>New Content</p>";

詳細說明

• 在 jQuery 中，我們使用 html() 方法來取得元素的 HTML 內容或設置新的 HTML 內容。如果不傳遞參數，它將返回元素的 HTML 內容；如果傳遞參數，則將設置元素的 HTML 內容為指定的值。
• 在原生 JavaScript 中，我們使用 innerHTML 屬性來取得元素的 HTML 內容或設置新的 HTML 內容。如果要取得 HTML 內容，只需獲取該屬性的值；如果要設置 HTML 內容，只需將新的 HTML 字符串賦值給該屬性。這樣可以實現相同的效果，但語法略有不同。

表單操作: 使用 val()

效果說明

我們想要實現在 DOM 中使用 jQuery 或原生 JavaScript 來取得或修改表單 (form) 元素的值。

使用 jQuery 實現

使用 jQuery，我們可以使用 val() 方法來取得或修改表單元素的值：

// 取得表單輸入框的值
var inputValue = $("input#my-input").val();

// 修改表單輸入框的值
$("input#my-input").val("新的值");

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 取得表單輸入框的值
var inputElement = document.querySelector("input#my-input");
var inputValue = inputElement.value;

// 修改表單輸入框的值
inputElement.value = "新的值";

詳細說明

• 在 jQuery 中，我們使用 val() 方法來取得表單元素的值或設置新的值。如果不傳遞參數，它將返回表單元素的值；如果傳遞參數，則將設置表單元素的值為指定的值。
• 在原生 JavaScript 中，我們使用 value 屬性來取得表單元素的值或設置新的值。如果要取得值，只需獲取該屬性的值；如果要設置值，只需將新的值賦值給該屬性。這樣可以實現相同的效果，但語法略有不同。

操作元素文字內容: 使用 text()

效果說明

我們想要實現在 DOM 中使用 jQuery 或原生 JavaScript 來取得元素的文字內容。

使用 jQuery 實現

使用 jQuery，我們可以使用 text() 方法來取得元素的文字內容：

// 取得元素的文字內容
var textContent = $("p#my-paragraph").text();

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 取得元素的文字內容
var paragraphElement = document.querySelector("p#my-paragraph");
var textContent = paragraphElement.textContent;

詳細說明

• 在 jQuery 中，我們使用 text() 方法來取得元素的文字內容。這個方法返回元素包含的文字，不包含 HTML 標記。
• 在原生 JavaScript 中，我們使用 textContent 屬性來取得元素的文字內容。這個屬性也只包含文字，不包含 HTML 標記。兩種方法都可以實現取得元素的文字內容，具體選擇哪種取決於你的需求和程式碼風格。

DOM 的操作

在容器內插入內容: 使用 before() 和 after()

效果說明

我們想要在 DOM 中使用 jQuery 或原生 JavaScript 來在特定容器內的元素前面或後面插入新的內容。

使用 jQuery 實現

使用 jQuery，我們可以使用 before() 和 after() 方法來在元素前面或後面插入內容：

// 在元素前面插入內容
$("p#my-paragraph").before("<p>New content before</p>");

// 在元素後面插入內容
$("p#my-paragraph").after("<p>New content after</p>");

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 在元素前面插入內容
var paragraphElement = document.querySelector("p#my-paragraph");
var newElementBefore = document.createElement("p");
newElementBefore.textContent = "New content before";
paragraphElement.parentNode.insertBefore(newElementBefore, paragraphElement);

// 在元素後面插入內容
var newElementAfter = document.createElement("p");
newElementAfter.textContent = "New content after";
paragraphElement.parentNode.insertBefore(newElementAfter, paragraphElement.nextSibling);

詳細說明

• 在 jQuery 中，我們使用 before() 方法來在元素前面插入新的內容，使用 after() 方法來在元素後面插入新的內容。我們只需將要插入的 HTML 程式碼作為參數傳遞給這些方法即可。
• 在原生 JavaScript 中，我們首先選擇要插入內容的元素，然後使用 createElement() 方法來建立一個新的元素，設置其內容，然後使用 parentNode.insertBefore() 方法來將新元素插入到指定元素前面或後面。要在元素後面插入，我們使用元素的 nextSibling 屬性來確定插入位置。這樣可以實現與 jQuery 中 before() 和 after() 方法相似的效果，但需要更多的程式碼。

修改 DOM 結構: 使用 append() 和 prepend()

效果說明

我們想要在 DOM 中使用 jQuery 或原生 JavaScript 來向容器元素加入新的子元素，可以選擇將其追加到容器的末尾或插入到容器的開頭。

使用 jQuery 實現

使用 jQuery，我們可以使用 append() 方法將新的子元素追加到容器的末尾，使用 prepend() 方法將新的子元素插入到容器的開頭：

// 將新的子元素追加到容器末尾
$("div#my-container").append("<p>New content at the end</p>");

// 將新的子元素插入到容器開頭
$("div#my-container").prepend("<p>New content at the beginning</p>");

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 將新的子元素追加到容器末尾
var containerElement = document.querySelector("div#my-container");
var newElementEnd = document.createElement("p");
newElementEnd.textContent = "New content at the end";
containerElement.appendChild(newElementEnd);

// 將新的子元素插入到容器開頭
var newElementStart = document.createElement("p");
newElementStart.textContent = "New content at the beginning";
containerElement.insertBefore(newElementStart, containerElement.firstChild);

詳細說明

• 在 jQuery 中，我們使用 append() 方法將新的子元素追加到容器的末尾，使用 prepend() 方法將新的子元素插入到容器的開頭。我們只需將要插入的 HTML 程式碼作為參數傳遞給這些方法。
• 在原生 JavaScript 中，我們首先選擇容器元素，然後使用 createElement() 方法來建立新的子元素，設置其內容，然後使用 appendChild() 方法將新元素追加到容器末尾。要將新元素插入到開頭，我們使用 insertBefore() 方法，將新元素插入到容器的第一個子元素之前。這樣可以實現與 jQuery 中 append() 和 prepend() 方法相似的效果，但需要更多的程式碼。

清空內容和移除元素: 使用 empty() 和 remove()

效果說明

我們想要在 DOM 中使用 jQuery 或原生 JavaScript 來清空元素的內容或將元素從 DOM 中移除。

使用 jQuery 實現

使用 jQuery，我們可以使用 empty() 方法來清空元素的內容，使用 remove() 方法將元素從 DOM 中移除：

// 清空元素的內容
$("div#my-element").empty();

// 將元素從 DOM 中移除
$("div#my-element").remove();

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 清空元素的內容
var elementToEmpty = document.querySelector("div#my-element");
elementToEmpty.innerHTML = "";

// 將元素從 DOM 中移除
var elementToRemove = document.querySelector("div#my-element");
elementToRemove.parentNode.removeChild(elementToRemove);

注意事項

• 使用 empty() 方法僅清空元素的內容，但保留元素本身。使用 remove() 方法將元素從 DOM 中永久移除。
• 在使用 remove() 方法時，被移除的元素將無法再次使用，並且無法通過 JavaScript 對其進行操作。請謹慎使用 remove()，特別是對於需要保留的元素。

刪除元素屬性: 使用 removeAttr()

效果說明

我們想要在 DOM 中使用 jQuery 或原生 JavaScript 來刪除元素的特定屬性。

使用 jQuery 實現

使用 jQuery，我們可以使用 removeAttr() 方法來刪除元素的屬性：

// 刪除元素的特定屬性
$("img#my-image").removeAttr("alt");

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 刪除元素的特定屬性
var imageElement = document.querySelector("img#my-image");
imageElement.removeAttribute("alt");

詳細說明

• 在 jQuery 中，我們使用 removeAttr() 方法來刪除元素的特定屬性。只需將要刪除的屬性名稱作為參數傳遞給該方法即可。
• 在原生 JavaScript 中，我們使用 removeAttribute() 方法來刪除元素的特定屬性。同樣，只需將要刪除的屬性名稱作為參數傳遞給該方法即可。這兩種方法都可以實現刪除元素屬性的效果，具體選擇哪種取決於你的需求和程式碼風格。

在容器中插入內容: 使用 append() 和 prepend()

效果說明

我們想要在 DOM 中使用 jQuery 或原生 JavaScript 來向容器元素加入新的子元素，可以選擇將其追加到容器的末尾或插入到容器的開頭。

使用 jQuery 實現

使用 jQuery，我們可以使用 append() 方法將新的子元素追加到容器的末尾，使用 prepend() 方法將新的子元素插入到容器的開頭：

// 將新的子元素追加到容器末尾
$("div#my-container").append("<p>New content at the end</p>");

// 將新的子元素插入到容器開頭
$("div#my-container").prepend("<p>New content at the beginning</p>");

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 將新的子元素追加到容器末尾
var containerElement = document.querySelector("div#my-container");
var newElementEnd = document.createElement("p");
newElementEnd.textContent = "New content at the end";
containerElement.appendChild(newElementEnd);

// 將新的子元素插入到容器開頭
var newElementStart = document.createElement("p");
newElementStart.textContent = "New content at the beginning";
containerElement.insertBefore(newElementStart, containerElement.firstChild);

詳細說明

• 在 jQuery 中，我們使用 append() 方法將新的子元素追加到容器的末尾，使用 prepend() 方法將新的子元素插入到容器的開頭。我們只需將要插入的 HTML 程式碼作為參數傳遞給這些方法。
• 在原生 JavaScript 中，我們首先選擇容器元素，然後使用 createElement() 方法來建立新的子元素，設置其內容，然後使用 appendChild() 方法將新元素追加到容器末尾。要將新元素插入到開頭，我們使用 insertBefore() 方法，將新元素插入到容器的第一個子元素之前。這樣可以實現與 jQuery 中 append() 和 prepend() 方法相似的效果，但需要更多的程式碼。

包覆元素: 使用 wrap()

效果說明

我們想要在 DOM 中使用 jQuery 或原生 JavaScript 來包覆一個元素，將其放入新的容器中。

使用 jQuery 實現

使用 jQuery，我們可以使用 wrap() 方法將元素包覆在新的容器內：

// 包覆元素
$("p#my-paragraph").wrap("<div class='wrapper'></div>");

使用原生 JavaScript 實現

如果要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 包覆元素
var paragraphElement = document.querySelector("p#my-paragraph");
var wrapperElement = document.createElement("div");
wrapperElement.className = "wrapper";
paragraphElement.parentNode.insertBefore(wrapperElement, paragraphElement);
wrapperElement.appendChild(paragraphElement);

詳細說明

• 在 jQuery 中，我們使用 wrap() 方法來將元素包覆在指定的 HTML 元素內。我們只需將要包覆的 HTML 程式碼作為參數傳遞給該方法。
• 在原生 JavaScript 中，我們首先選擇要包覆的元素和新容器元素，然後使用 createElement() 方法來建立新的容器元素，設置其類名等屬性，然後使用 insertBefore() 方法將新容器插入到原始元素的前面，最後使用 appendChild() 方法將原始元素移動到新容器內。這樣可以實現與 jQuery 中 wrap() 方法相似的效果，但需要更多的程式碼。包覆元素通常不是經常使用的操作，所以較少用到。

用 CSS 的類別來控制視覺: 使用 addClass() 和 removeClass()

效果說明

我們想要了解如何使用 jQuery 的 addClass() 和 removeClass() 方法來加入或移除元素的 CSS 類別，從而控制其視覺樣式。

使用 jQuery 實現

使用 jQuery，我們可以使用 addClass() 方法來加入一個或多個 CSS 類別到元素，使用 removeClass() 方法來從元素中移除一個或多個 CSS 類別：

// 加入 CSS 類別到元素
$("p#my-paragraph").addClass("highlight");

// 移除 CSS 類別從元素
$("p#my-paragraph").removeClass("highlight");

使用原生 JavaScript 實現

要使用原生 JavaScript 來實現相同的效果，可以這樣做：

// 加入 CSS 類別到元素
var paragraphElement = document.querySelector("p#my-paragraph");
paragraphElement.classList.add("highlight");

// 移除 CSS 類別從元素
paragraphElement.classList.remove("highlight");

詳細說明

• 使用 jQuery 的 addClass() 方法可以將一個或多個 CSS 類別加入到元素，從而改變其視覺樣式。使用 removeClass() 方法可以從元素中移除一個或多個 CSS 類別，還原其樣式。
• 在原生 JavaScript 中，我們使用 classList 屬性來加入或移除 CSS 類別。使用 classList.add() 方法可以加入一個或多個 CSS 類別，使用 classList.remove() 方法可以從元素中移除一個或多個 CSS 類別。這兩種方法可以實現與 jQuery 中 addClass() 和 removeClass() 方法相似的效果，但需要更多的程式碼。控制 CSS 類別是調整元素視覺樣式的重要方法之一。