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中文网其他相关文章！