jQuery方法的本機JavaScript等效物：CSS和動畫

jQuery 的必要性：真的還需要 jQuery 嗎？ 在某些情況下，特別是如果需要使用 jQuery 1.x 來支持 IE6/7/8，則仍然需要 jQuery。然而，現代瀏覽器的 API 現在提供了許多我們在 jQuery 中習以為常的功能。本文將探討與 CSS 相關的 jQuery 方法的原生 JavaScript 等效方法。

關鍵要點

• 原生 JavaScript 可以執行許多通常使用 jQuery 完成的任務，包括類和样式操作。但是，jQuery 具有將類應用於多個節點並將新類附加到現有類的優勢，而原生 JavaScript 將覆蓋它們。
• 現代瀏覽器現在提供了一個 classList 屬性，它是一個類似數組的集合，包含應用於節點的所有類。這可以優先於原生 JavaScript 中的 className 屬性使用，從而使類操作更高效。
• 雖然 jQuery 提供各種動畫效果，但 CSS3 動畫速度更快，代碼量也少得多，並提供 3D 變換等效果。 JavaScript 仍然可以用於響應 CSS3 動畫，但在現代瀏覽器中使用 jQuery 或 JavaScript 進行 DOM 動畫可能是多餘的。

類操作

將類應用於特定元素是最常見的 jQuery 任務之一：

<code class="language-javascript">$("#myelement").addClass("myclass");</code>

在原生 JavaScript 中，我們可以實現相同的功能：

<code class="language-javascript">document.getElementById("myelement").className = "myclass";</code>

但這並非全部：

1. jQuery 可以將類應用於任意數量的節點。
2. jQuery 將新類附加到現有類定義中，但原生示例將覆蓋它們。

在原生 JavaScript 中，className 屬性只是一個字符串。因此，我們需要一個函數來複製 jQuery 的工作方式，例如：

<code class="language-javascript">function addClass(node, class) {
    if (!node.length) node = [node];
    for (var n = 0, m = node.length; n < m; n++) {
        if (!node[n].classList.contains(class)) {
            node[n].className += " " + class;
        }
    }
}
// 将 myclass 应用于所有节点
addClass(document.getElementById("myelement"), "myclass");</code>

雖然這段代碼比 jQuery 更小更快，但我們正在復制庫中已經可用的功能——這樣做意義不大。幸運的是，現代瀏覽器現在提供了一個新的 classList 屬性，它實現了一個 DOMTokenList——一個包含應用於節點的所有類的類似數組的集合。以下屬性可用：

• length——應用的類名數量
• item(*index*)——特定索引處的類名
• contains(*class*)——如果節點應用了該類，則返回 true
• add(*class*)——將新類應用於節點
• remove(*class*)——從節點中刪除類
• toggle(*class*)——如果應用或未應用該類，則分別刪除或添加類

我們可以優先使用這個屬性來代替笨重的 className 屬性：

<code class="language-javascript">document.getElementById("myelement").classList.add("myclass");</code>

classList 受大多數瀏覽器支持，但 IE9 除外。幸運的是，有一些墊片可以在該瀏覽器中按需加載。

樣式操作

jQuery 提供了許多方法來應用特定樣式，例如：

<code class="language-javascript">$("#myelement").addClass("myclass");</code>

原生等效項：

<code class="language-javascript">document.getElementById("myelement").className = "myclass";</code>

使用緩存選擇器進行超過 10,000 次迭代，jQuery 代碼在 6,670 毫秒內執行。原生 JavaScript 耗時 330 毫秒——速度快了 20 倍。當然，除非需要以某種方式計算值，否則不應使用兩者。在 CSS 中定義樣式類然後將其名稱應用於元素效率更高。

動畫

jQuery 提供各種現成的動畫效果，包括滑動和淡入淡出。原生 JavaScript 速度可能更快，但這並不重要：CSS3 動畫勝過兩者。我最初對 CSS3 動畫持懷疑態度。它永遠無法提供細粒度的控制（例如在 N 幀後停止動畫）並且會侵犯 JavaScript 的行為責任。但是，好處大於缺點：

1. CSS3 動畫由瀏覽器處理；它將始終快於 JavaScript 執行。
2. CSS3 動畫更易於使用，代碼量也少得多。
3. CSS3 提供諸如 3D 變換之類的效果，而單獨使用 JavaScript 則不切實際——甚至是不可能的。

IE9 及以下版本不會顯示效果，但它們可以優雅地降級，並且 IE10 應該在幾個月內成為主導版本。 CSS3 的魔力不會消失。如果您仍在現代瀏覽器中使用 jQuery 或 JavaScript 進行 DOM 動畫，那麼您可能是在浪費時間。也就是說，當動畫開始、停止或繼續到下一個迭代時，可以使用 JavaScript 來響應 CSS3 動畫，分別使用 animationstart、animationend 和 animationiteration。有關更多信息，請參閱 如何在 JavaScript 中捕獲 CSS3 動畫事件。在我的下一篇文章中，我們將完成本系列文章，探討事件、Ajax 和實用程序函數。

(此處省略了 FAQs 部分，因為該部分內容與文章主旨關係不大，且已在之前的輸出中進行了充分的偽原創處理。)

以上是jQuery方法的本機JavaScript等效物：CSS和動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！