jQueryの最も強力な資産は、DOM内の要素をクエリおよび操作する方法であると何度か耳にしました。CSSクエリを使用して、通常のjavascriptでは非常に難しい複雑なクエリを作成できます。ただし、私が知る限り、InternetExplorer8以降でサポートされているdocument.querySelectorまたはを使用して同じ結果を得ることができます。document.querySelectorAll
だから問題はこれです：その最強の資産が純粋なJavaScriptで達成できるのなら、なぜ「リスク」jQueryのオーバーヘッド？
jQueryにはCSSセレクターだけではありません。たとえば、クロスブラウザーAJAX、優れたイベント添付などです。しかし、そのクエリ部分はjQueryの強みの非常に大きな部分です。
何かご意見は？
document.querySelectorAll() ブラウザ間でいくつかの不整合があり、古いブラウザではサポートされていません。これにより、最近は問題が発生しない可能性があります。それは非常に直感的でないスコーピングメカニズムと他のいくつかのあまり良くない機能を持っています。また、javascriptを使用すると、これらのクエリの結果セットを操作するのに苦労します。多くの場合、これを実行することをお勧めします。jQueryは、、、、、、、などfilter()の関数を提供find()します。疑似クラスセレクターと連携するjQuery機能は言うまでもありません。children()parent()map()not()
ただし、これらの機能をjQueryの最も強力な機能とは見なしませんが、クロスブラウザー互換の方法またはajaxインターフェイスでのDOM（イベント、スタイリング、アニメーション、操作）の「作業」などの他の機能と見なします。
jQueryのセレクターエンジンのみが必要な場合は、jQuery自体が使用しているものを使用できます。Sizzleこのようにして、厄介なオーバーヘッドなしでjQuerysセレクターエンジンのパワーを利用できます。
編集：記録のために、私はバニラJavaScriptの大ファンです。それでも、1行のjQueryを作成する場合に10行のJavaScriptが必要になることがあるのは事実です。
もちろん、次のようにjQueryを記述しないように訓練する必要があります。
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();
これは非常に読みにくいですが、後者はかなり明確です。
$('ul.first')
.find('.foo')
.css('background-color', 'red')
.end()
.find('.bar')
.css('background-color', 'green')
.end();
同等のJavaScriptは、上記の擬似コードで示されているように、はるかに複雑になります。
1）要素を見つけ、すべての要素または最初の要素のみを取ることを検討します。
// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");
2）いくつかの（ネストされているか再帰的な）ループを介して子ノードの配列を反復処理し、クラスを確認します（クラスリストはすべてのブラウザーで使用できるわけではありません！）
//.find('.foo')
for (var i = 0;i<e.length;i++){
// older browser don't have element.classList -> even more complex
e[i].children.classList.contains('foo');
// do some more magic stuff here
}
3）cssスタイルを適用します
// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"
このコードは、jQueryで記述したコードの少なくとも2倍の行になります。また、ネイティブコードの（信頼性に加えて）深刻な速度の利点を損なうクロスブラウザの問題を考慮する必要があります。
IE8以降用にページを最適化する場合は、jqueryが必要かどうかを実際に検討する必要があります。最新のブラウザには、jqueryが提供する多くのアセットがネイティブにあります。
パフォーマンスを重視する場合は、ネイティブjavascriptを使用し て信じられないほどのパフォーマンス上の利点（2〜10高速）を得ることができます：http： //jsperf.com/jquery-vs-native-selector-and-element-style/2
div-tagcloudをjqueryからネイティブjavascript（IE8 +互換）に変換したところ、印象的な結果が得られました。わずかなオーバーヘッドで4倍高速。
Number of lines Execution Time
Jquery version : 340 155ms
Native version : 370 27ms
Jqueryは、どのネイティブメソッドがどのブラウザバージョンに置き換わるかという非常に優れた概要を提供します。
http://youmightnotneedjquery.com/
付録：ネイティブメソッドがjqueryと競合する速度の比較
jQueryが非常に人気がある理由を理解するには、私たちがどこから来ているのかを理解することが重要です！
約10年前、上位のブラウザはIE6、Netscape 8、Firefox1.5でした。当時は、DOMから要素を選択するためのクロスブラウザの方法はほとんどありませんでしたDocument.getElementById()。
したがって、2006年にjQueryがリリースされたとき、それはかなり革命的でした。当時、jQueryは、その柔軟性とブラウザーのサポートが前例のないものであったため、HTML要素を簡単に選択/変更してイベントをトリガーする方法の標準を設定しました。
10年以上経った今、jQueryを非常に人気のあるものにした多くの機能がjavaScript標準に含まれるようになりました。
$()、を使用できるようになりましたDocument.querySelectorAll()$el.on()、を使用できるようになりましたEventTarget.addEventListener()$el.toggleClass()、を使用できるようになりましたElement.classList.toggle()これらは2005年には一般的に利用可能ではありませんでした。今日それらが利用可能であるという事実は、なぜjQueryを使用する必要があるのかという疑問を明らかにします。そして実際、人々は私たちがjQueryを使うべきかどうか疑問に思うようになっています。
したがって、JavaScriptをjQueryなしで十分に理解していると思われる場合は、ぜひ実行してください。他の多くの人がjQueryを使用しているからといって、jQueryを使用せざるを得ないと感じないでください。
これは、jQueryがより多くのことを実行できるためですquerySelectorAll。
まず第一に、jQuery（特にSizzle）は、CSS2.1-3セレクターをサポートしていないIE7-8のような古いブラウザーで動作します。
さらに、Sizzle（jQueryの背後にあるセレクターエンジン）は、:selected疑似クラス、高度な:not()セレクター、inなどのより複雑な構文など、より高度なセレクターインスツルメントを多数提供します$("> .children")。
そしてそれは、jQueryが提供できるすべてのもの（プラグインとAPI）を提供し、完璧にクロスブラウザーを実行します。
はい、単純なクラスとIDセレクターに頼ることができると思うなら、jQueryはあなたには多すぎて、誇張された見返りを払うことになります。ただし、そうではなく、jQueryの優れた機能をすべて活用したい場合は、それを使用してください。
jQueryのSizzleセレクターエンジンは、利用querySelectorAll可能な場合に使用できます。また、ブラウザ間の不整合を滑らかにして、均一な結果を実現します。すべてのjQueryを使用したくない場合は、Sizzleを個別に使用できます。これは、発明するためのかなり基本的なホイールです。
jQuery（w / Sizzle）があなたのために分類するものの種類を示すソースからのいくつかのチェリーピッキングはここにあります：
Safariのクァークズモード：
if ( document.querySelectorAll ) {
(function(){
var oldSizzle = Sizzle,
div = document.createElement("div"),
id = "__sizzle__";
div.innerHTML = "<p class='TEST'></p>";
// Safari can't handle uppercase or unicode characters when
// in quirks mode.
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return;
}
そのガードが失敗した場合、それはで強化されていないバージョンのSizzleを使用しquerySelectorAllます。さらに下には、IE、Opera、およびBlackberryブラウザの不整合に対する特定のハンドルがあります。
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id === match[3] ) {
return makeArray( [ elem ], extra );
}
} else {
return makeArray( [], extra );
}
そして、他のすべてが失敗した場合、それはの結果を返しますoldSizzle(query, context, extra, seed)。
コードの保守性に関しては、広く使用されているライブラリを使用する理由がいくつかあります。
主なものの1つは、それらが十分に文書化されており、ライブラリのヘルプが見つかる... say...stackexchangeなどのコミュニティがあることです。カスタムコード化されたライブラリを使用すると、コーダーがコードを書くよりも文書化することに多くの時間を費やさない限り、ソースコードと、おそらくハウツードキュメントを手に入れることができます。
独自のライブラリを作成することはあなたにとってはうまくいくかもしれませんが、隣の机に座っているインターンは、jQueryのようなものに慣れるのが簡単かもしれません。
必要に応じて、ネットワーク効果と呼びます。これは、コードがjQueryで優れていると言っているのではありません。コードの簡潔な性質により、表示しているファイルに一度に表示される関数型コードが多いという理由だけで、すべてのスキルレベルのプログラマーの全体的な構造を簡単に把握できます。この意味で、5行のコードは10行よりも優れています。
要約すると、jQueryの主な利点は、簡潔なコードであり、どこにでもあると思います。
同じ属性を適用する場合の比較を次に示します。たとえば、クラス「my-class」のすべての要素を非表示にします。これがjQueryを使用する理由の1つです。
jQuery：
$('.my-class').hide();
JavaScript：
var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
cls[i].style.display = 'none';
}
jQueryはすでに非常に人気があるので、document.querySelector（）を$（）と同じように動作させる必要があります。代わりに、document.querySelector（）は最初に一致する要素のみを選択するため、半分しか役に立ちません。
古い質問ですが、半年後、再検討する価値があります。ここでは、jQueryのセレクターの側面についてのみ説明します。
document.querySelector[All]IE8まで、現在のすべてのブラウザでサポートされているため、互換性は問題ではなくなりました。また、パフォーマンスの問題は見つかりませんでした（より遅いはずでしたdocument.getElementByIdが、私自身のテストでは、わずかに速いことが示されています）。
したがって、要素を直接操作する場合は、jQueryよりも優先されます。
例えば：
var element=document.querySelector('h1');
element.innerHTML='Hello';
以下よりもはるかに優れています：
var $element=$('h1');
$element.html('hello');
何かを行うには、jQueryは100行のコードを実行する必要があります（jQueryが実際に何をしているかを確認するために、上記のようなコードをトレースしたことがあります）。これは明らかにみんなの時間の無駄です。
jQueryのもう1つの重要なコストは、すべてを新しいjQueryオブジェクト内にラップするという事実です。このオーバーヘッドは、オブジェクトを再度ラップ解除する必要がある場合、またはオブジェクトメソッドの1つを使用して、元の要素に既に公開されているプロパティを処理する必要がある場合に特に無駄になります。
ただし、jQueryの利点は、コレクションの処理方法にあります。複数の要素のプロパティを設定する必要がある場合、jQueryには次のeachような組み込みのメソッドがあります。
var $elements=$('h2'); // multiple elements
$elements.html('hello');
Vanilla JavaScriptを使用してこれを行うには、次のようなものが必要になります。
var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
e.innerHTML='Hello';
});
気が遠くなるような人もいます。
jQueryセレクターもわずかに異なりますが、最新のブラウザー（IE8を除く）はあまりメリットがありません。
原則として、新しいプロジェクトにjQueryを使用しないように注意します。
上記のいずれも重要でない場合は、あなたがすることをしてください。ただし、最新のJavaScriptとCSSは以前よりもはるかに進んでいるため、jQueryはクロスプラットフォーム開発にとって以前ほど重要ではなくなりました。
これは、jQueryの他の機能については言及していません。しかし、彼らももっとよく見る必要があると思います。
公式サイトが言うように：「jQuery：Write Less、Do More、JavaScriptLibrary」
ライブラリなしで次のjQueryコードを翻訳してみてください
$("p.neat").addClass("ohmy").show("slow");
本当の答えは、jQueryがquerySelector/querySelectorAllすべての主要なブラウザーで利用可能になるずっと前に開発されたということだと思います。
jQueryの最初のリリースは2006年でした。実際、jQueryでさえCSSセレクターを実装した最初のものではありませんでした。
IEは、を実装した最後のブラウザでしたquerySelector/querySelectorAll。その8番目のバージョンは2009年にリリースされました。
そのため、DOM要素セレクターはjQueryの最強のポイントではなくなりました。ただし、要素のcssおよびhtmlコンテンツを変更するためのショートカット、アニメーション、イベントバインディング、ajaxなど、まだ多くの利点があります。
$（ "＃id"）vs document.querySelectorAll（ "＃id"）
取引は$（）関数を使用して配列を作成し、それを分割しますが、document.querySelectorAll（）を使用すると配列を作成し、分割する必要があります。
これについてのコメントですが、マテリアルデザインライトを使用している場合、jqueryセレクターは何らかの理由でマテリアルデザインのプロパティを返しません。
にとって：
<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="myinputfield" required>
<label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
</div>
これは機能します：
document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();
これはしません：
$('#myinputfield').parentNode.MaterialTextfield.change();