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

關(guān)鍵要點(diǎn)

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

類(lèi)操作

將類(lèi)應(yīng)用於特定元素是最常見(jiàn)的 jQuery 任務(wù)之一：

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

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

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

但這並非全部：

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

在原生 JavaScript 中，className 屬性只是一個(gè)字符串。因此，我們需要一個(gè)函數(shù)來(lái)複製 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é)點(diǎn)
addClass(document.getElementById("myelement"), "myclass");

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

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

我們可以?xún)?yōu)先使用這個(gè)屬性來(lái)代替笨重的 className 屬性：

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

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

樣式操作

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

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

原生等效項(xiàng)：

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

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

動(dòng)畫(huà)

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

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

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

(此處省略了 FAQs 部分，因?yàn)樵摬糠謨?nèi)容與文章主旨關(guān)係不大，且已在之前的輸出中進(jìn)行了充分的偽原創(chuàng)處理。)

以上是jQuery方法的本機(jī)JavaScript等效物：CSS和動(dòng)畫(huà)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！