web-dev-qa-db-ja.com

jqueryコードをjavascriptに変換する簡単な方法はありますか？

JQueryを使用してjavascript/domで特定のことを実現する例はたくさんあります。ただし、jQueryを使用することが常にjQueryで記述されたjavascriptソリューションの例を理解しにくいオプションとは限りません。

JQueryコードを通常のjavascriptに変換する簡単な方法はありますか？ jQueryのソースコードにアクセスしたり、理解したりする必要はないと思います。

javascriptjquerycode-conversion
129
davidsleeps

最も簡単な方法は、単純なDOM apiを使用してDOMトラバースと操作を行う方法を学習することです（通常、これを通常のJavaScriptと呼びます）。

ただし、これはいくつかの点で苦痛になる場合があります。 （そもそも図書館が発明された理由です）。

「javascript DOM traversing/manipulation」をグーグルで検索すると、役立つ（そしてあまり役に立たない）リソースがたくさんあります。

このウェブサイトの記事はかなり良いです： http://www.htmlgoodies.com/primers/jsp/

また、Nosrednaがコメントで指摘しているように、すべてのブラウザーでテストするようにしてください。jQueryは不整合を処理しなくなるからです。

40
Pim Jager

これにより、90％の道が開けます。 ）

window.$ = document.querySelectorAll.bind(document)

Ajaxの場合、 Fetch API は すべての主要なブラウザーの現在のバージョンでサポートされています になりました。 $.ready()の場合、- DOMContentLoaded には ユニバーサルサポートに近い があります。 jQueryが不要な場合があります は、他の一般的なjQuery関数と同等のネイティブメソッドを提供します。

Zepto は同様の機能を提供しますが、圧縮されて10Kになります。 jQueryとZeptoのカスタムAjaxビルドと マイクロフレームワーク がありますが、jQuery/Zeptoはしっかりとサポートされており、56 KBモデムで10 KBはわずか1秒です。

54
Indolering

2012年1月19日にJeffrey Wayからjqueryからjavascriptへの変換に関するこの非常に印象的なチュートリアルを見つけました*Copyright © 2014 Envato*：

http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/

好むと好まざるとにかかわらず、ますます多くの開発者がjQueryを介してJavaScriptの世界に紹介されています。多くの点で、これらの新人は幸運な人です。多数の新しいJavaScript APIにアクセスできるため、DOMトラバーサル（多くの人がjQueryに依存しているもの）のプロセスが非常に簡単になります。残念ながら、彼らはこれらのAPIについて知りません！

この記事では、さまざまな一般的なjQueryタスクを取り上げ、それらを最新のJavaScriptとレガシーJavaScriptの両方に変換します。

私はOPへのコメントでそれを提案し、彼の提案の後、私はそれを公開し、誰もが参照できる答えを持っています。

また、彼のインスピレーションの魔女について言及したジェフリー・ウェイは、理解のための良い入門書のようです： http://sharedfil.es/js-48hIfQE4XK.html

ティーザーがあります。jQueryとjavascriptのこのドキュメント比較：

$(document).ready(function() {
  // code…
});

document.addEventListener("DOMContentLoaded", function() {
  // code…
});

$("a").click(function() {
  // code…
})

[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});

ご覧ください。

20
Milche Patern

これは古いスレッドであることは知っていますが、jqueryと同等のネイティブjavascriptを示す優れたリソースがあり、ES6の例も含まれています。これは、この主題を扱っている他の記事から見つけた最も包括的なものです。

バニラJSへのjQuery

13
dan

JQueryコードを通常のjavascriptに変換する簡単な方法はありますか？

いいえ、特に次の場合：

jQueryで記述されたjavascriptソリューションの例を理解するのは難しいです。

JQueryとすべてのフレームワークは、コードの理解を容易にする傾向があります。それを理解するのが難しい場合、バニラジャバスクリプトは拷問になります:)

7
Ryan Florence

JavaScriptを学びたい場合は、ダグラスクロックフォードのこれらのビデオをご覧ください。彼らはとても良い。

  1. Javascriptプログラミング言語：履歴、言語、高度な機能、プラットフォーム、標準、スタイル [ スライドをダウンロード ]
  2. DOMの理論 [ スライドをダウンロード ]
  3. 高度なJavaScript：継承、モジュール、デバッグ、効率、JSON [ スライドをダウンロード ]
7
bobobobo

元の投稿とは無関係に、jQueryコードを標準JavaScriptに自動的にコンパイルする理由がわかります。

16k（またはgzip圧縮された縮小されたjQueryライブラリが何であれ）は、モバイルブラウザー向けのWebサイトには大きすぎる可能性があります。 w3cは、モバイルWebサイトのすべてのHTTPリクエストを最大20kにすることを推奨しています。

モバイル用のw3c仕様

だから、私のニースで簡潔な連鎖jQueryでのコーディングを楽しんでいます。しかし、今はモバイル向けに最適化する必要があります。本当に戻って、jQueryライブラリで使用したすべてのヘルパー関数を書き直すという、困難で退屈な作業を行う必要がありますか？または、再コンパイルに役立つ便利なアプリがありますか？

それはとても甘いでしょう。悲しいことに、私はそのようなものが存在するとは思わない。

6
Bill Fisher

Jeremy Keithの本「 DOM Scripting 」は、JavascriptとDOMを扱うための素晴らしい入門書です。 jQueryを使用するかどうかにかかわらず、これを強くお勧めします。下で何が起こっているかを知るのは良いことです。

1
dylanfm

利用可能ないくつかの良い本があります。 JavaScriptのppkが好きです。 C DOMの第8章 です。

1
Nosredna