jQueryメソッドのネイティブJavaScript同等物：DOMとフォーム

コアポイント

• jQueryは、アプリケーションの開発よりも長くjqueryのようなライブラリをサポートする必要がある開発者にとって便利なツールです。ただし、他のほとんどのケースでは、Native JavaScriptを使用することは、jQueryのような大きなライブラリを読み込む必要がないため、より効率的です。
• domセレクターやDOM操作などの一般的に使用されるjQueryメソッドのネイティブJavaScript同等物は、通常、jQueryの対応物よりも速く効率的に実行されます。たとえば、document.getElementsByClassNameまたはdocument.getElementByIdを使用すると、jqueryの$()ラッパーを使用するよりもはるかに高速になる場合があります。
• HTML5は、フォーム検証のために追加のJavaScriptまたはjQueryコードを追加せずに、さまざまな一般的な入力タイプを組み込みサポートします。これらの新しいタイプをサポートしていない古いブラウザは、標準のテキスト入力フィールドに復元され、サーバー側の検証が必要です。

私の最近の「あなたは本当にjQueryが必要ですか？記事、議論は続きますが、要するに、jQueryを使用する理由は2つあります。1。IE6/7/8をサポートする必要があります（jquery 2.0に移行できないことを忘れない）、または2。開発以上の費用アプリケーションは、jQueryのようなライブラリを書くのに時間がかかります。

他のすべての状況では実用的であることをお願いします。 jQueryは270kbのユニバーサルライブラリです。特定のモジュールを省略したとしても、それがコードの大きな塊であっても、それが提供するすべての機能を必要とする可能性は低いです。 CDNから30kbの削除バージョンをロードできますが、ブラウザは他のアクションを実行する前に、各ページの処理を停止し、コードを解析する必要があります。これは、一般的に使用されるjQueryメソッドにネイティブのJavaScriptに相当するものを紹介する一連の記事の最初のものです。これらのいくつかを短く、同様のエイリアス機能で包みたいかもしれませんが、確かに独自のjQueryのようなライブラリを作成する必要はありません。

dom selector

jQueryは、CSSセレクターの構文を使用してDOMノードの選択を許可します。

ネイティブ同等物：

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

var n = document.querySelectorAll("article#first p.summary");

は、すべての最新のブラウザーとIE8に実装されています（ただし、これはCSS2.1セレクターのみをサポートしています）。 jQueryは、より高度なセレクターに追加のサポートを提供しますが、ほとんどの場合、

ラッパー内で実行されます。ネイティブJavaScriptは4つの選択肢も提供しています。これは、それらを使用できる場合よりもほぼ確実に高速です。

1. document.querySelector(selector) - 最初の一致するノードのみを取得します
2. document.getElementById(idname) - そのID名で単一のノードを取得
3. document.getElementsByTagName(tagname) - 要素に一致するノードを取得します（H1、P、Strongなど）。
4. document.getElementsByClassName(class) - 特定のクラス名を持つノードを取得

getElementsByTagNameおよびgetElementsByClassNameメソッドを単一のノードに適用して、結果を子孫のみに制限することもできます。たとえば

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

いくつかのテストをしましょう。私は「あなたは本当にjqueryが必要ですか？」から得るためにいくつかの小さなスクリプトを書きました。 comment記事ですべてのコメントノードを10,000回検索します。結果：

厳格なラボ条件を主張することも、実際の使用法を反映していませんが、この場合、ネイティブのJavaScriptは60倍高速です。また、ID、タグ、またはクラスでノードを取得することは通常querySelectorAllよりも優れていると述べています。

dom operation

jQueryは、次のようなDOMにさらに追加するいくつかの方法を提供します。

表面の下で、jQueryはネイティブ

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

メソッドを使用します。

innerHTMLDom Buildテクノロジーを使用することもできます。これらはより安全ですが、

：

var n = document.querySelectorAll("article#first p.summary");

よりも速くはめったにありません

innerHTMLjqueryですべての子ノードを削除することもできます：

var n = document.getElementById("first");
var p = n.getElementsByTagName("p");

：

$("#container").append("<p>more content</p>");

を使用するネイティブ等価物

innerHTMLまたは小さな関数：

document.getElementById("container").innerHTML += "<p>more content</p>";

最後に、jqueryのDOMから要素全体を削除することができます：

var p = document.createElement("p");
p.appendChild(document.createTextNode("more content"));
document.getElementById("container").appendChild(p);

またはネイティブJavaScript：

$("#container").empty();

スケーラブルベクトルグラフィックス（SVG）

document.getElementById("container").innerHTML = null;

現在のドキュメントを処理するためにコアJQueryライブラリが開発されました。 SVGにはdomがありますが、jqueryはこれらのオブジェクトに直接操作を提供しません。通常、や

などのメソッドが必要です。動作し、いくつかのプラグインがありますが、独自のコードを作成したり、raphaëlやsvg.jsなどの専用のSVGライブラリを使用する方が効率的です。

createElementNSgetAttributeNShtml5 form

最も基本的なWebアプリケーションでさえ、1つまたは2つのフォームがあります。サーバー側のユーザーデータを常に確認する必要がありますが、理想的には、フォームを送信する前にエラーをキャッチできるように、クライアントの検証で補足します。クライアントの検証は簡単です：1。フォームが送信されたときに関数を実行します。 2.問題が発生した場合は、送信を停止し、エラーを表示します。

jqueryを使用できます。ネイティブJavaScriptを使用できます。どちらを選ぶべきですか？

どちらも

を選択しません。 HTML5は、通常の表現に基づいて、電子メール、電話、URL、数字、時刻、日付、色、カスタムフィールドなど、一般的に使用されるさまざまな入力タイプをサポートしています。たとえば、ユーザーに電子メールアドレスを入力するように強制する場合は、以下を使用してください。

より複雑な機能（2つ以上のフィールドを比較したり、カスタムエラーメッセージの表示など）が必要な場合を除き、追加のJavaScriptまたはJQueryコードは必要ありません。古いブラウザ（IE9以下を含む）は新しいタイプを理解しておらず、標準のテキスト入力フィールドに復元されます。これらのユーザーは、サーバー側の検証に戻りますが、これは素晴らしい体験ではありませんが、シムを適用したり、これらの人々が光を見たりアップグレードしたりすることを願っています。私の次の投稿では、ネイティブCSSクラスの操作とアニメーションを見ていきます。 JQueryとネイティブJavaScript

var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);

についての

faqs

（この部分の内容が画像と記事の主題に弱く関連しており、記事が長くなっているため、FAQパーツはここで省略されています。

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