jQueryメソッドのネイティブJavaScript同等物：CSSとアニメーション

jQueryの必要性：jQueryは本当に必要ですか？ 場合によっては、特にIE6/7/8をサポートするためにjQuery 1.xを使用する必要がある場合は、JQueryがまだ必要です。ただし、最新のブラウザのAPIは、JQueryで慣れている多くの機能を提供しています。この記事では、CSSに関連するjQueryメソッドのネイティブJavaScript同等物を調べます。

キーポイント

• ネイティブJavaScriptは、クラスやスタイルの操作を含むjQueryを使用して通常行われる多くのタスクを実行できます。ただし、jQueryには複数のノードにクラスを適用し、既存のクラスに新しいクラスを添付するという利点がありますが、ネイティブJavaScriptはそれらをオーバーライドします。
• 最新のブラウザは、ノードに適用されたすべてのクラスを含む配列のようなコレクションであるclassListプロパティを提供するようになりました。これは、ネイティブJavaScriptでのclassName属性の使用よりも優先され、クラス操作がより効率的になります。
• jQueryはさまざまなアニメーション効果を提供しますが、CSS3アニメーションはより速く、コードがはるかに少なく、3D変換などの効果を提供します。 JavaScriptは引き続きCSS3アニメーションに応答するために使用できますが、最新のブラウザのDOMアニメーションにjQueryまたはJavaScriptを使用することは冗長です。

古典的な操作

特定の要素にクラスを適用することは、最も一般的なjQueryタスクの1つです。

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

ネイティブJavaScriptでは、同じ機能を実装できます。

しかし、それだけではありません：

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

jQueryは、任意の数のノードにクラスを適用できます。

1. jQueryは既存のクラス定義に新しいクラスを添付しますが、ネイティブの例はそれらを無効にします。
2. ネイティブJavaScriptでは、
属性は単なる文字列です。したがって、jQueryの仕組みなどをコピーする機能が必要です。

このコードはjQueryよりも小さくて高速ですが、ライブラリですでに利用可能な機能をコピーしています。そうすることはあまり意味がありません。幸いなことに、最新のブラウザは、ノードに適用されるすべてのクラスの同様の配列のコレクションを実装する新しいclassNameプロパティを提供するようになりました。次の属性が利用可能です：

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

classList - 適用されたクラス名の数DOMTokenList

- 特定のインデックスでのクラス名
• length
- ノードがこのクラスを適用している場合、true
• を返します item(*index*)
- 新しいクラスをノードに適用します
• contains(*class*)
- ノード
• からクラスを削除します add(*class*)
- クラスが適用されているか、適用されていない場合、クラスは個別に削除または追加されます
• remove(*class*)
この属性は、かさばる
• 属性の代わりに最初に使用できます：toggle(*class*)

は、IE9を除き、ほとんどのブラウザでサポートされています。幸いなことに、このブラウザにオンデマンドでロードできるシムがいくつかあります。 className

スタイル操作

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アニメーションは、ブラウザによって処理されます。

1. CSS3アニメーションは使いやすく、コードがはるかに少ない。
2. CSS3は3D変換などの効果を提供しますが、JavaScriptだけは非現実的ですが、不可能です。
IE9以下は効果を示しませんが、それらは優雅に格下げすることができ、IE10は数か月以内に支配的なバージョンになるはずです。 CSS3の魔法は消えません。最新のブラウザでJQueryまたはJavaScriptを使用してDOMアニメーションを行っている場合は、時間を無駄にしている可能性があります。つまり、アニメーションが開始、停止、または次のイテレーションに続くと、JavaScriptを使用してCSS3アニメーションにそれぞれ応答して、それぞれ

、

、およびを使用できます。詳細については、JavaScriptでCSS3アニメーションイベントをキャプチャする方法を参照してください。私の次の投稿では、この一連の記事を完成させ、イベント、AJAX、およびユーティリティ機能について議論します。 animationstart animationendanimationiteration（この部分の内容は記事の主なテーマとはほとんど関係がなく、以前の出力で完全に擬似オリジナル化されているため、FAQの部分はここで省略されています。

以上がjQueryメソッドのネイティブJavaScript同等物：CSSとアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。