[解決済み】Vanilla JavaScriptとjQueryはいつ使い分ける？

質問

jQueryの一般的な質問に対する回答をモニターしているうちに、jQueryの代わりにjavascriptを使用して、実際に以下のことを可能にする特定の実践があることに気づきました。 より少ない記述と実行 ...まあ同じ量です。 また、パフォーマンス上の利点も得られるかもしれません。

具体的な例

$(this) 対 this

クリックされたオブジェクトのidを参照するクリックイベントの内部

jQuery

$(this).attr("id");

ジャバスクリプト

this.id;

このような一般的なプラクティスは他にもあるのでしょうか？ ある種のJavascriptの操作が、jQueryを持ち込むことなく、より簡単に達成できるような場合です。 それとも、これは稀なケースなのでしょうか？(jQueryのショートカットが実際にはより多くのコードを必要とするような場合）。

EDIT : jQueryとプレーンなjavascriptのパフォーマンスに関する回答はありがたいのですが、実はもっと定量的な答えを探しているんです。 jQueryを使用している間 を使用する代わりに、プレーンなjavascriptを使用した方が良い場合（可読性/コンパクト性）は、次のとおりです。 $() . 最初の質問で挙げた例に加えて、次のようなものがあります。

どのように解決するのですか？

• this.id (ご存知の通り)
• this.value (ほとんどの入力タイプで。私が知っている唯一の問題は、IEで <select> がない場合は value プロパティが設定されています。 <option> 要素、またはSafariのラジオ入力のようなものです)。
• this.className クラスプロパティ全体を取得または設定するには
• this.selectedIndex に対して <select> 選択されたインデックスを取得するために
• this.options に対して <select> のリストを取得する。 <option> 要素
• this.text に対して <option> を使用して、そのテキストコンテンツを取得します。
• this.rows に対して <table> のコレクションを取得します。 <tr> 要素
• this.cells に対して <tr> をクリックすると、そのセル（td & th）を取得します。
• this.parentNode 直接の親を取得する
• this.checked のチェック状態を取得します。 checkbox ティム・ダウンさんありがとうございます。
• this.selected の選択状態を取得します。 option ティム・ダウンさんありがとうございます。
• this.disabled の無効状態を取得します。 input ティム・ダウンさんありがとうございます。
• this.readOnly の readOnly 状態を取得する。 input ティム・ダウンさんありがとうございます。
• this.href に対して <a> 要素を取得し、その href
• this.hostname に対して <a> 要素のドメインを取得します。 href
• this.pathname に対して <a> 要素のパスを取得するために、その href
• this.search に対して <a> 要素のクエリ文字列を取得します。 href
• this.src を持つことが有効である要素に対して src

...お分かりいただけたと思います。

パフォーマンスが重要な場合もあるでしょう。例えば、何かを何度もループして実行する場合、jQueryを捨てたくなるかもしれません。

一般的には置き換えることができます。

$(el).attr('someName');

を使っています。

上記は言葉足らずでした。 getAttribute は置換ではありませんが、サーバから送られてきた属性の値を取得し、それに対応する setAttribute がそれを設定します。場合によっては必要。

下の文章は、それをカバーするようなものでした。 この回答を見る をご覧ください。

el.getAttribute('someName');

...属性に直接アクセスするためです。属性はプロパティと同じではないことに注意してください（時々、互いにミラーリングされますが）。もちろん setAttribute もあります。

例えば、あるページで特定のタイプのタグをすべてアンラップする必要があるとします。jQueryを使えば、短時間で簡単にできます。

$('span').unwrap();  // unwrap all span elements

しかし、数が多い場合は、少しネイティブなDOM APIをしたほうがいいかもしれません。

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

このコードはかなり短く、jQueryバージョンよりも性能が良く、個人的なライブラリで簡単に再利用可能な関数にすることができます。

の外側で無限ループしているように見えるかもしれません。 while なぜなら while(spans[0]) を実行したときに更新されます。 parent.removeChild(span[0]); . これは、Array（またはArrayに似たオブジェクト）を使っているときにはない、とても便利な機能です。