2009-06-11 20 views
104

jQueryを使用してjavascript/domの特定のことを実現する例がたくさんあります。しかし、jQueryを使用することは、常にjQueryで書かれたjavascriptソリューションの例を理解できるオプションではありません。jqueryコードをjavascriptに変換する簡単な方法はありますか?

jQueryコードを通常のjavascriptに変換する簡単な方法はありますか?私は、jQueryのソースコードにアクセスしたり理解したりすることなく、推測しています。

+0

私は想像することはできません。しかし、あなたはいつでもバニラJavaScript DOMを使用して、jQueryを使って行うことができるものを10行で行うことができます。 – yfeldblum

+7

基本的には、1 jquery行を10個のバニラのjavascript行に変換したものです... jqueryが利用できない場合は... – davidsleeps

+0

jQueryを組み込むためにスクリプトタグを使用できない場合でも、縮小されたverisonをソースファイルの前に追加します。 jQueryが何らかの企業政治以外に利用できない理由は何もわかりません。 – cdmckay

答えて

34

最も簡単な方法は、プレーンなDOM APIを使ってDOMのトラバースと操作を行う方法を学ぶことです(普通のJavaScript)。

しかし、これはいくつかのことにとって痛いことがあります。 (これが最初にライブラリが発明された理由です)。

「javascript DOM traversing/manipulation」のグーグルリングでは、役立つ(役立たずに役立つ)リソースがたくさんあります。 http://www.htmlgoodies.com/primers/jsp/

そしてNosrednaはコメントで指摘するように:このウェブサイト上の

記事はかなり良いです、今jQueryのあなたのための矛盾を扱うことはありませんので、すべてのブラウザでテストしてください。

+4

そして、各ブラウザのさまざまなバージョンに対して確実にテストする必要があります。 – Nosredna

+0

確かに。 jQueryのポイントの半分は、ブラウザ間のJSの互換性の問題をすべて整理することです。 – Noldorin

+0

これは本当で、なぜ私はj​​queryを使うことができるのですか?この特定のアプリケーションは、会社全体の標準的なワークステーションのセットアップを持つイントラネット専用の環境です...政治はjqueryがアプリケーションで使用されているのを防ぎます! – davidsleeps

1

Jeremy Keithの書籍「DOM Scripting」は、JavascriptとDOMを扱う素晴らしいイントロです。 jQueryを使用するかどうかにかかわらず、私はそれを強く推奨します。下に何が起こっているのか知ることは良いことです。

1

いくつかの良い本があります。私はJavaScriptのppkが好きです。ここにC hapter 8 on the DOMがあります。

6
+2

少し話題がありますが、Crockfordの講演は一般的に素晴らしいです。 – Indolering

8

通常のJavaScriptにjQueryの コードを変換する簡単な方法はありますか?ハード[ある]

はjQueryのに書き込まれたJavaScript溶液 の例を理解する:場合は特に

いいえ。

JQueryとすべてのフレームワークは、コードの理解を容易にする傾向があります。 - または何でもgzipで圧縮された

16K:それは理解することは難しい場合は、バニラJavascriptを拷問:)

+13

他にも実際の回答があります – ftrotter

+2

また、JQueryはコードをより簡潔に(通常は)作成しますが、実際に簡単にするかどうかは議論の余地があります。 jQueryは、精神的に解析するためにいくつかのコードを難しくすることができます。 たとえば、myfunction(field){field.value = "3";} {{{{{{{}};});}} '{input} = 'thing'>' )() ' – liljoshu

6

私は、オリジナルのポストに関係のない理由を、見ることができます自動的に標準のJavaScriptにjQueryのコードをコンパイルすることになります、jQueryライブラリが小さくなりました - あなたのウェブサイトにはモバイルブラウザ向けのものが多すぎるかもしれません。 w3cは、モバイルウェブサイトのすべてのHTTPリクエストが最大20kであることを推奨しています。

w3c specs for mobile

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

これは非常に甘いでしょう。残念ながら、私はそのようなことは存在しないと思う。

43

これで90%の道が得られます。アヤックスの場合)

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

Fetch APIは今supported on the current version of every major browserです。 $.ready()の場合、DOMContentLoadednear universal supportです。 You Might Not Need jQueryは、他の一般的なjQuery関数と同等のネイティブメソッドを提供します。

Zeptoは、同様の機能を提供しますが、10Kジップで計量します。 jQueryとZepto用のカスタムAjaxビルドと同様にmicro frameworksがありますが、jQuery/Zeptoは56kモデムでわずか1秒です。

16

私はちょうど2012*Copyright © 2014 Envato*月19日にジェフリー・ウェイからのjavascriptの変換にjqueryのについては、この非常に印象的チュートリアルを見つけた:

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

我々はそれを好きかどうかは、より多くの開発者があります最初にjQueryを通してJavaScriptの世界に紹介された です。多くの では、これらの新人は幸運なものです。 DOM (多くの人々がjQueryに依存するもの) のプロセスをかなり容易にする、新しいJavaScript APIの にアクセスできます。残念ながら、彼らはこれらのAPIについて知りません!

この記事では、さまざまな一般的なjQueryタスクを取り上げ、 を現代のJavaScriptと従来のJavaScriptの両方に変換します。

私はOPへのコメントで提案し、彼の提案後に誰もが参照できるように答えを出します。

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

document.addEventListener("DOMContentLoaded", function() { 
    // code… 
}); 
http://sharedfil.es/js-48hIfQE4XK.html

はティーザー、JavaScriptにjQueryのの、この文書の比較を持っている:

また、ジェフリー・ウェイは、彼のインスピレーションの魔女は、理解のための良好なプライマーであるように思わについて言及しました


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

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

あなたは見てみる必要があります。

+0

有望そうです! – Indolering

8

これは古いスレッドだと知っていますが、jqueryに相当するネイティブのjavascriptを表示する優れたリソースがあります。さらに、ES6の例も含まれています。これは私がこの主題を扱っている他の記事から見出した最も包括的なものです。あなたはこれをしたいと思う理由

jQuery to Vanilla JS

+0

素晴らしいリソース、ありがとう! – davidsleeps

関連する問題