Native JavaScript Equivalents of jQuery Methods: CSS and Animation

The necessity of jQuery: Is jQuery really necessary? In some cases, especially if you need to use jQuery 1.x to support IE6/7/8, jQuery is still required. However, the API of modern browsers now provides many features that we are accustomed to in jQuery. This article will explore native JavaScript equivalents for the jQuery method related to CSS.

Key Points

• Native JavaScript can perform many tasks that are usually done using jQuery, including class and style operations. However, jQuery has the advantage of applying classes to multiple nodes and attaching new classes to existing classes, while native JavaScript will override them.
• Modern browsers now provide a classList property, which is an array-like collection containing all classes applied to nodes. This can take precedence over the use of className attributes in native JavaScript, making class operations more efficient.
• While jQuery provides various animation effects, CSS3 animations are faster, much less code, and provides effects such as 3D transformations. JavaScript can still be used to respond to CSS3 animations, but it can be redundant to use jQuery or JavaScript for DOM animation in modern browsers.

Classic Operation

Applying classes to specific elements is one of the most common jQuery tasks:

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

In native JavaScript, we can implement the same function:

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

But that's not all:

1. jQuery can apply classes to any number of nodes.
2. jQuery attaches new classes to existing class definitions, but native examples override them.

In native JavaScript, the className attribute is just a string. Therefore, we need a function to copy how jQuery works, for example:

<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>

While this code is smaller and faster than jQuery, we are copying features that are already available in the library - doing so doesn't make much sense. Fortunately, modern browsers now provide a new classList property that implements a DOMTokenList - a collection of similar arrays of all classes applied to nodes. The following attributes are available:

• length——The number of class names applied
• item(*index*)——Class name at a specific index
• contains(*class*)—Return true
if the node applies this class
• add(*class*)——Apply new classes to nodes
• remove(*class*)——Remove class from node
• toggle(*class*)—If the class is applied or not applied, the class will be deleted or added separately

We can use this attribute first instead of the bulky className attribute:

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

classList is supported by most browsers, except for IE9. Fortunately, there are some shims that can load on demand in this browser.

Style operation

jQuery provides many ways to apply specific styles, such as:

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

Native equivalent:

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

For more than 10,000 iterations using the cache selector, the jQuery code executes in 6,670 milliseconds. Native JavaScript takes 330 milliseconds – 20 times faster. Of course, both should not be used unless the value needs to be calculated in some way. Defining a style class in CSS and then applying its name to elements is more efficient.

Animation

jQuery provides a variety of ready-made animations, including swipes and fades. Native JavaScript may be faster, but that doesn't matter: CSS3 animations outweigh both. I was initially skeptical about CSS3 animation. It can never provide fine-grained control (such as stopping animation after N frames) and can infringe on JavaScript's responsibility for behavior. However, the benefits outweigh the disadvantages:

1. CSS3 animation is processed by the browser; it will always be faster than JavaScript execution.
2. CSS3 animations are easier to use and much less code.
3. CSS3 provides effects such as 3D transformations, while JavaScript alone is impractical—even impossible.

IE9 and below won't show effects, but they can be downgraded gracefully, and IE10 should be the dominant version within a few months. The magic of CSS3 will not disappear. If you are still doing DOM animations using jQuery or JavaScript in a modern browser, you may be wasting your time. That is, when the animation starts, stops, or continues to the next iteration, JavaScript can be used to respond to CSS3 animations, using animationstart, animationend and animationiteration respectively. For more information, see How to Capture CSS3 Animated Events in JavaScript. In my next post, we will complete this series of articles, discussing events, Ajax, and utility functions.

(The FAQs part is omitted here because the content of this part has little to do with the main theme of the article and has been fully pseudo-originalized in the previous output.)

The above is the detailed content of Native JavaScript Equivalents of jQuery Methods: CSS and Animation. For more information, please follow other related articles on the PHP Chinese website!