jQuery方法的本機JavaScript等效物：CSS和動畫-js教程-PHP中文網

Native JavaScript Equivalents of jQuery Methods: CSS and Animation

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 任務之一：

$("#myelement").addClass("myclass");

登入後複製

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

document.getElementById("myelement").className = "myclass";

登入後複製

但這並非全部：

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

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

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");

登入後複製

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

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

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

document.getElementById("myelement").classList.add("myclass");

登入後複製

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

樣式操作

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

$("#myelement").addClass("myclass");

登入後複製

原生等效項：

document.getElementById("myelement").className = "myclass";

登入後複製

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

動畫

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

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

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

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

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