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

關(guān)鍵要點

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

類操作

將類應(yīng)用于特定元素是最常見的 jQuery 任務(wù)之一：

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

在原生 JavaScript 中，我們可以實現(xiàn)相同的功能：

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

但這并非全部：

1. jQuery 可以將類應(yīng)用于任意數(shù)量的節(jié)點。
2. jQuery 將新類附加到現(xiàn)有類定義中，但原生示例將覆蓋它們。

在原生 JavaScript 中，className 屬性只是一個字符串。因此，我們需要一個函數(shù)來復(fù)制 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 應(yīng)用于所有節(jié)點
addClass(document.getElementById("myelement"), "myclass");

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

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

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

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

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

樣式操作

jQuery 提供了許多方法來應(yīng)用特定樣式，例如：

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

原生等效項：

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

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

動畫

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

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

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

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

以上是jQuery方法的本機JavaScript等效物：CSS和動畫的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！