私たちはJavaScriptとJQueryをかなりの数年前から知っています。 JavaScriptはjQueryよりも前に発明されました。どちらも強力で、Web開発で使用され、同じ目的で使用されます。つまり、Webページをインタラクティブで動的にするために使用されます。言い換えれば、彼らはウェブページに命を吹き込みます。人々は、それらが同じ目的で使用されているのなら、なぜこれら2つの別々の概念があるのか疑問に思うかもしれません。このJavaScriptとjQueryの記事では、次の順序でどちらが他よりも優れているかを確認します。
doubleをintegerjavaに変換します
- JavaScript：Web開発における強力な言語
- JQuery：JavaScriptから開発されたライブラリ
- JQueryが作成される理由とJQueryの特別な機能は何ですか
- JavaScriptとJQueryの違いと例
JavaScript：Web開発における強力な言語
JavaScriptは、Webページに双方向性を追加するために使用されるスクリプト言語です。これは、Webページの作成に使用されるHTMLおよびCSSと並ぶ3つのコアテクノロジーの1つです。 HTMLとCSSはウェブページの構造とウェブページの外観/スタイルを定義しますが、JavaScriptはインタラクティブ性を追加することでウェブページを動的にするために使用されます。つまり、JavaScriptを使用すると、マウスクリック、マウスオーバーなどのコードを追加できます。 Webページのイベントなど。
JavaScriptはすべてのWebブラウザーでサポートされており、WebブラウザーにはJavaScriptコードを識別して操作するためのJavaScriptエンジンが組み込まれています。したがって、JavaScriptは主にクライアント側の言語です。これは、手続き型言語としてだけでなく、プロトタイプベースのオブジェクト指向言語としても使用できる1つの言語です。プライマリJavaScriptを使用する場合、手続き型言語を使用しますが、高度なJavaScriptはオブジェクト指向の概念を使用します。
JavaScriptとjQueryを比較して、JavaScriptから開発されたライブラリについて理解しましょう。
jQuery：JavaScriptから開発されたライブラリ
何年にもわたって、JavaScriptはWeb開発のための強力な言語であることが判明しました。 JavaScriptの上に構築された多くのライブラリとフレームワークが登場しています。これらのライブラリとフレームワークは、JavaScriptの機能を拡張し、JavaScriptを使用して多くのことを実行し、開発者の作業を容易にするために開発されています。
jQueryは、JavaScriptから構築されたJavaScriptのそのようなライブラリの1つです。これは、John Resignによって発明された最も人気のあるJavaScriptライブラリであり、2006年1月にBarCampNYCでリリースされました。 jQueryは無料のオープンソースライブラリであり、MITライセンスの下でライセンスされています。これには、ブラウザ間の互換性という強力な機能があります。 JavaScriptで直面する可能性のあるクロスブラウザーの問題を簡単に処理できます。したがって、多くの開発者は、ブラウザ間の互換性の問題を回避するためにjQueryを使用しています。
それでは、JavaScriptとjQueryのブログに移り、jQueryが作成された理由を見てみましょう。
jQueryが作成される理由とjQueryの特別な機能は何ですか？
JavaScriptでは、基本的な操作のために多くのコードを作成する必要がありますが、jQueryでは、同じ操作を1行のコードで実行できます。したがって、開発者はJavaScriptよりもjQueryを使用する方が簡単だと感じています。
- JavaScriptはjQueryが進化した基本言語ですが、jQueryはイベント処理、DOM操作を可能にし、Ajax呼び出しはJavaScriptよりもはるかに簡単です。 jQueryを使用すると、JavaScriptを使用して多くの手間とコード行を必要とするアニメーション効果をWebページに追加することもできます。
- jQueryには、Webページで操作を実行するためのプラグインが組み込まれています。プラグインを使用するには、プラグインをWebページに含めるかインポートする必要があります。したがって、プラグインを使用すると、アニメーションやインタラクションまたはエフェクトの抽象化を作成できます。
- jQueryを使用してカスタムプラグインを作成することもできます。特定の方法でWebページ上でアニメーションを実行する必要がある場合は、要件に応じてプラグインを開発し、それをWebページで使用できます。
- jQueryには、高レベルのUIウィジェットライブラリもあります。このウィジェットライブラリには、Webページにインポートして、ユーザーフレンドリーなWebページを作成するために使用できるさまざまなプラグインがあります。
違いを理解しましょう。
JavaScriptとjQuery
| 特徴 | JavaScript | jQuery |
| 存在 | JavaScriptは独立した言語であり、それ自体で存在できます。 | jQueryはJavaScriptライブラリです。 JavaScriptがなかったら、それは発明されなかっただろう。 jQueryは、ブラウザーに組み込まれているJavaScriptエンジンがそれを解釈して実行するために、JavaScriptに変換する必要があるため、依然としてJavaScriptに依存しています。 |
| 言語 | これは、高レベルのインタープリター型クライアント側スクリプト言語です。これは、ECMAスクリプトとDOM（ドキュメントオブジェクトモデル）の組み合わせです。 | 軽量のJavaScriptライブラリです。 DOMしかありません |
| コーディング | JavaScriptは、独自のコードを作成する必要があるため、より多くのコード行を使用します | jQueryは、コードがすでにライブラリに記述されているのと同じ機能のためにJavaScriptよりも少ないコード行を使用します。ライブラリをインポートし、コードでライブラリの関連する関数/メソッドを使用するだけです。 |
| 使用法 | JavaScriptコードは、HTMLページのscriptタグ内に記述されています | jQueryを使用するには、CDNまたはjQueryライブラリがダウンロードされている場所からjQueryをインポートする必要があります。 jQueryコードは、HTMLページのscriptタグ内にも記述されています。 |
| アニメーション | 多くのコード行を使用してJavaScriptでアニメーションを作成できます。アニメーションは、主にHtmlページのスタイルを操作することによって行われます。 | jQueryでは、少ないコード行でアニメーション効果を簡単に追加できます。 |
| 使いやすさ | JavaScriptは、機能を実現するために数行のコードを必要とする可能性があるため、開発者にとって厄介な場合があります。 | jQueryは、数行のコードでJavaScriptよりもユーザーフレンドリーです |
| クロスブラウザの互換性 | JavaScriptでは、追加のコードまたは回避策を記述して、ブラウザー間の互換性に対処する必要がある場合があります。 | jQueryはクロスブラウザ互換です。コードをブラウザと互換性を持たせるために、回避策や追加のコードを書くことを心配する必要はありません。 |
| パフォーマンス | 純粋なJavaScriptは、JavaScriptがブラウザーによって直接処理されるため、jQueryよりもDOMの選択/操作が高速になる可能性があります。 | jQueryをブラウザで実行するには、JavaScriptに変換する必要があります。 |
| イベント処理、双方向性、およびAjax呼び出し | これらはすべてJavaScriptで実行できますが、多くのコード行を記述しなければならない場合があります。 | これらはすべて、少ないコード行でjQueryを使用して簡単に実行できます。関数はライブラリですでに事前定義されているため、jQueryではインタラクティブ機能やアニメーションを追加したりajax呼び出しを行ったりする方が簡単です。コード内の必要な場所でこれらの関数を使用するだけです。 |
| 冗長性 | JavaScriptは、機能のために多くのコード行を記述しなければならないため、冗長です。 | jQueryは簡潔で、使用するコード行が少なく、場合によっては1行のコードしか使用しません。 |
| サイズと重量 | 言語であるため、jQueryよりも重いです | ライブラリであるため、軽量です。それはそれを軽量にするそのコードの縮小版を持っています。 |
| 再利用性と保守性 | JavaScriptコードは冗長になる可能性があるため、保守と再利用が難しい場合があります。 | コードの行数が少なくなると、コード内のjQueryライブラリで事前定義された関数を呼び出すだけでよいため、jQueryはより保守しやすくなります。これにより、コード内のさまざまな場所でjQuery関数を簡単に再利用することもできます。 |
例を使用して、JavaScriptとjQueryの違いについて説明します。
JavaScriptとjQueryの例
例を見てみましょう。
HTMLドキュメントにJavaScriptとjQueryを追加する
JavaScriptはタグ内のHTMLドキュメントに直接追加されるか、外部JavaScriptファイルはsrc属性を使用してHTMLドキュメントに追加できます。
スクリプトタグ内に直接書き込まれます：
alert（ 'このアラートボックスはonloadイベントで呼び出されました'）
jQueryを使用するには、そのWebサイトからファイルをダウンロードし、ダウンロードしたjQueryファイルのパスをSCRIPTタグのsrc属性で参照するか、CDN（コンテンツ配信ネットワーク）から直接取得できます。
CDNの使用 ：
DOMトラバーサルと操作を理解しましょう
DOMトラバーサルと操作
JavaScriptの場合：
JavaScriptで、document.getElementById（）メソッドまたはdocument.querySelector（）メソッドを使用してDOM要素を選択できます。
var mydiv = document.querySelector（“＃div1”）
または
document.getElementById（“＃div1”）
jQueryの場合：
ここでは、括弧内のセレクターで$記号のみを使用する必要があります。
$（selector）$（“＃div1”）–セレクターはID'div1 '$（“。div1”）–セレクターはクラス' div1 '$（“ p”）–セレクターはHTMLページ
上記のステートメントで、$はjQueryにアクセスするために使用される記号であり、セレクターはHTML要素です。
JavaScriptでのスタイルの追加：
document.getElementById（ 'myDiv'）。style.backgroundColor = '＃FFF'
jQueryにスタイルを追加する：
$（ '＃myDiv'）。css（ ‘background-color'、 '＃FFF'）
#myDivセレクターは「myDiv」識別子を参照します
DOM要素の選択と操作は、JavaScriptよりもjQueryの方がはるかに簡潔です。
イベント処理に進みます。
イベント処理
JavaScriptでは、HTML要素を選択します。
document.getElementById（ '＃button1'）。addEventListener（ 'click '、myCallback）function myCallback（）{console（“ inside myCallback function”）}ここでは、getElementById（）メソッドを使用してIDで要素を選択し、次にaddEventListener（）メソッドを使用してイベントリスナーをイベントに追加します。この例では、myCallback関数をリスナーとして「クリック」イベントに追加します。
上記の例では、匿名関数を使用することもできます。
document.getElementById（ '＃button1'）。addEventListener（ 'click '、function（）{console.log（' inside the function '）}）eventListenerは、removeEventListener（）メソッドを使用して削除できます。
document.getElementById（“＃button1”）。removeEventListener（“ click”、myCallback）
jQueryで
jQueryには、ほぼすべてのDOMアクションに対して事前定義されたイベントがあります。アクションに特定のjQueryイベントを使用できます。
$（“ p”）。click（function（）{//クリックアクション}）その他の例は次のとおりです。
$（“＃button1”）。dblclick（function（）{// ID‘button1 ’のhtml要素に対するダブルクリックイベントのアクション}JQueryの「on」メソッドは、1つ以上のイベントをDOM要素に追加するために使用されます。
$（“＃button1”）。on（“ click”、function（）{//ここでのアクション}）onメソッドを使用して、複数のイベントと複数のイベントハンドラーを追加できます。
$（“ button1”）。on（{click：function（）{//ここでのアクション}、dblclick：function（）{//ここでのアクション}}）2つ以上のイベントは、以下のように同じハンドラーを持つことができます。
$（“＃button1”）。on（“ click dblclick”、function（）{//ここでのアクション}）したがって、コードが少なく簡潔なため、JavaScriptよりもjQueryの方がイベント処理が簡単であることがわかります。
AjaxCallsに進みます。
Ajaxの呼び出し
JavaScriptの場合
JavaScriptは、XMLHttpRequestオブジェクトを使用してAjaxリクエストをサーバーに送信しました。 XMLHttpRequestには、Ajax呼び出しを行うためのいくつかのメソッドがあります。 2つの一般的なメソッドは、open（method、URL、async、user、PSW）、send（）、およびsend（string）です。
最初にXMLHttpRequestを作成しましょう：
var xhttp = new XMLHttpRequest（）次に、このオブジェクトを使用してopenメソッドを呼び出します。xhttp.open（ 'GET'、 'D：//getinfo.txt'、true）xhttp.send（）
openメソッドはサーバー/場所にgetリクエストを送信し、trueはリクエストが非同期であることを指定します。値がfalseの場合、要求が同期していることを意味します。
投稿リクエストの作成：
var xhttp = new XMLHttpRequest（）次に、このオブジェクトを使用してopenメソッドを呼び出し、POSTリクエストを作成します。xhttp.open（ 'POST'、 'D：//postinfo.txt'、true）xhttp.send（）
リクエストとともにデータを投稿するには、xhttpのsetRequestHeaderメソッドを使用して送信するデータのタイプを定義し、sendメソッドはキーと値のペアでデータを送信します。
xhttp.setRequestHeader（ 'Content-type'、 'application / x-www-form-urlencoded'）xhttp.send（ 'name = Ravi＆surname = Kumar'）
jQueryで
例を挙げたJavaのpojoクラスとは
jQueryには、Ajax呼び出しを行うためのいくつかの組み込みメソッドがあります。これらのメソッドを使用すると、サーバーから任意のデータを呼び出して、そのデータでWebページの一部を更新できます。 jQueryメソッドを使用すると、Ajaxの呼び出しが簡単になります。
jQuery load（）メソッド：このメソッドは、URLからデータをフェッチし、そのデータをHTMLセレクターにロードします。
$（“ p”）。load（URL、データ、コールバック）
URLはデータに対して呼び出される場所であり、オプションのデータパラメーターは呼び出しとともに送信するデータ（キーと値のペア）であり、オプションのパラメーター 'callback'はロード後に実行するメソッドです。完成されました。
jQueryの$ .get（）および$ .post（）メソッド：このメソッドは、URLからデータをフェッチし、そのデータをHTMLセレクターにロードします。
$ .get（URL、コールバック）
URLはデータに対して呼び出される場所であり、コールバックはロードの完了後に実行するメソッドです。
$ .post（URL、データ、コールバック）
URLはデータに対して呼び出される場所であり、データは呼び出しで送信するキーと値のペアであり、コールバックはロードの完了後に実行するメソッドです。ここでは、データとコールバックのパラメーターはオプションです。
jQuery Ajax呼び出しは、JavaScriptよりも簡潔です。 JavaScriptではXMLHTTPRequestオブジェクトを使用していますが、jQueryではそのようなオブジェクトを使用する必要はありません。
アニメーションに移ります。
アニメーション
JavaScriptの場合
JavaScriptには、jQuery animate（）関数のような特定のアニメーション関数はありません。 JavaScriptでは、アニメーション効果は主に要素のスタイルを操作するか、CSSの変換、変換、またはアニメーション化プロパティを使用して実現されます。 JavaScriptは、アニメーション効果にsetInterval（）、clearInterval（）、setTimeout（）、およびclearTimeout（）メソッドも使用します。
setInterval（myAnimation、4）function myAnimation（）{document.getElementById（ '＃div1'）。style.transform = 'translate（100px、100px）' document.getElementById（ '＃div1'）。style.transform = 'rotate（ 20度） '}JavaScriptでのアニメーションは、主にCSSプロパティの操作に関するものです。
jQueryで
jQueryには、HTML要素にアニメーションや効果を追加するための多くの組み込みメソッドがあります。それらのいくつかを確認しましょう。
animate（）メソッド：このメソッドは、要素にアニメーションを追加するために使用されます。
$（ '＃button1'）。click（function（）{$（ '＃div1'）。animate（{height： '300px'}）}）show（）メソッド：このメソッドは、要素を非表示の状態から表示するために使用されます。
$（ '＃button1'）。click（function（）{$（ '＃div1'）。show（）}）hide（）メソッド：このメソッドは、要素を表示状態から非表示にするために使用されます。
$（ '＃button1'）。click（function（）{$（ '＃div1'）。hide（）}）jQueryには、Webページでアニメーションとエフェクトを生成する独自のメソッドがあります。
要約すると、JavaScriptはWeb開発用の言語であり、jQueryはJavaScriptから生まれたライブラリです。 JavaScriptとjQueryは、Web開発において独自の重要性を持っています。
JavaScriptループについて理解したので、 Edurekaによる。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なウェブサイトを作成し、Amazon Simple Storage Service（S3）にデプロイする方法を学ぶのに役立ちます。
質問がありますか？ 「JavaScriptvsjQuery」のコメントセクションにその旨を記載してください。折り返しご連絡いたします。