ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryとJavaScript、ajaxの違いは何ですか

jQueryとJavaScript、ajaxの違いは何ですか

coldplay.xixi
coldplay.xixiオリジナル
2020-11-20 10:52:252021ブラウズ

jQuery JavaScript ajax の違い: 1. JavaScript はクライアント側 Web 開発のスクリプト言語として広く使用されており、HTML Web ページに動的関数を追加するためによく使用されます; 2. AJAX は、インタラクティブな Web アプリケーション; 3. jQuery Web サイトに AJAX インタラクションを便利に提供します。

jQueryとJavaScript、ajaxの違いは何ですか

jQuery JavaScript ajax の違い:

1、JavaScript

JavaScript の略称は JS で、クライアント側の Web 開発で広く使用されているスクリプト言語です。HTML Web ページに動的関数を追加するためによく使用されます (JavaScript で記述されたプログラムは HTML または XML ページに埋め込まれ、HTML ページで直接解釈できます)。ブラウザ)実装)。

コンポーネント:

コア (ECMAScript)、ドキュメント オブジェクト モデル (DOM)、ブラウザ オブジェクト モデル (BOM)

説明:

  • Javascript は、動的な Web ページ制作のニーズを満たすために生まれた新しいプログラミング言語であり、現在、インターネットの Web ページ制作でますます広く使用されています。

  • Javascript の出現により、Web ページとユーザーの間にリアルタイムで動的かつインタラクティブな関係が可能になり、Web ページにはよりアクティブな要素とよりエキサイティングなコンテンツが含まれるようになります。

  • Javascript は短く簡潔で、クライアント マシン上で実行されるため、Web ページのブラウジング速度とインタラクティブ機能が大幅に向上します。同時に、Web ページの作成に特化したシンプルなプログラミング言語でもあります。

2. Ajax

AJAX は「Asynchronous JavaScript and XML」(非同期 JavaScript と XML)の略語ではなく、略語。インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指すために、Jesse James Gaiiett によって作られた用語。

構成:

  • ## XHTML および CSS 標準に基づく表現;

  • 動的な表示と対話にはドキュメント オブジェクト モデルを使用します。

  • データの対話と操作には XML と XSLT を使用します。

  • # サーバーとの非同期通信には XML HttpRequest を使用します。

  • # JavaScript を使用してすべてをバインドします。

説明:

  • Ajax は、Java テクノロジ、XML、JavaScript、およびその他のプログラミング テクノロジを組み合わせたもので、開発者は Java ベースの Web を構築できます。テクノロジー ページのリロードを使用して管理を適用および解除します。

  • Ajax テクノロジは、非同期 HTTP リクエストを使用してブラウザと Web サーバーの間でデータを転送するため、ブラウザは Web ページ全体をリロードせずに、Web ページのコンテンツの一部のみを更新します。

  • Ajax は、クライアント側のスクリプトを使用して Web サーバーとデータを交換する Web アプリケーション開発方法です。このようにして、対話プロセスを中断したり再編集したりすることなく、Web ページを動的に更新できます。 Ajax を使用すると、ユーザーはネイティブ デスクトップ アプリケーションに近い、直接的で可用性が高く、リッチでダイナミックな Web ユーザー インターフェイスを作成できます

3、jQuery

jQuery は、ユーザーが HTML ドキュメントとイベントをより簡単に処理し、アニメーション効果を実現し、Web サイトに AJAX インタラクションを簡単に提供できるようにする、高速で簡潔な JavaScript ライブラリです。

特徴:

jQuery は非常に人気のある JavaScript フレームワークで、CSS に似たセレクターを使用して HTML 要素を簡単に操作でき、拡張性が高く、プラグインも豊富です。

説明:

  • プログラマーにとって、JavaScript と Ajax プログラミングが簡素化されることで、プログラマーは複雑な JS アプリケーションの設計と作成から解放され、実装の詳細ではなく機能要件に集中することができます。 、それによってプロジェクト開発のスピードが向上します。

  • ユーザーにとって、ページの視覚効果が向上し、ページとのインタラクティブ性が向上し、より豪華な Web ページ素材を体験できます。

  • JavaScript フレームワークは、実際には一連のツールと関数です。

#2 つと 3 つの関係

地図を使用して 3 つの関係を説明します。

説明:

JavaScript は Web クライアント開発に使用されるスクリプト言語です。Ajax は、主に JS、CSS、XML 技術を組み合わせた JS 言語をベースとした新しい技術です。インタラクティブな Web アプリケーションの作成に使用されます。Web開発技術。 jQuery は JS フレームワークであり、JS 言語と Ajax テクノロジーに基づいて開発された JS ライブラリであり、JS と Ajax の機能をカプセル化し、Ajax と JS の操作を大幅に簡素化する関数インターフェイスを提供します。

jQuery はプロジェクトでよく使用されます。詳しく説明します。

jQuery を使用すると、JavaScript プログラムの作成が大幅に簡素化されます

jQuery を使用するには、まず HTML コードの先頭に jQuery ライブラリへの参照を追加する必要があります。例:

<script language="javascript" src="/js/jquery.min.js"></script>   //引用

ライブラリ ファイルはローカルに配置することも、CDN を直接使用することもできます。有名な企業の CDN 読み込み (jquery の利点) は、これらの大企業の CDN が比較的人気があることです。ユーザーは Web サイトにアクセスする前に、他の Web サイトにアクセスするときにブラウザーに CDN をキャッシュしている可能性が高いため、高速化できます。ウェブサイトのオープンまで。もう 1 つの利点は明らかで、Web サイトのトラフィック帯域幅を節約できます。

Google 提供

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

jQuery 公式

http://code.jquery.com/jquery-1.6.min.js

一般的な操作を行う場合の、jQuery コードの具体的な記述方法とネイティブ Javascript の記述方法の違いは次のとおりです。 :

1 要素の配置

JS

document.getElementById("abc")

jQuery

$("# abc") ID による配置

$(".abc") クラスによる配置

$("div") タグによる配置

である必要があります。 JS が返す結果はこの要素であり、jQuery によって返される結果は JS オブジェクトであることに注意してください。次の例では、要素 abc が配置されていると想定しています。

2 要素の内容を変更します

JS

abc.innerHTML = "test"; //現在のプロジェクトで役立ちます

jQuery

abc.html("test");

3 隠し要素の表示

JS

abc.style .display = "none";

#abc.style.display = "block";

jQuery

abc.hide ();

abc .show();

abc.toggle(); //表示と非表示を切り替えます、

4 フォーカスを取得します

JS と jQuery は同じで、どちらも abc.focus();

5 フォームに値を割り当てます

JS

abc .value = "test ";

jQuery

abc.val("test");

6 形式

JS の値を取得します

alert(abc.value);

jQuery

alert(abc.val());

7 要素の設定 使用できません ##JS

abc.disabled = true;

jQuery

abc.attr("disabled", true);

8 要素のスタイルを変更します

JS

abc.style.fontSize=size;

jQuery

abc.css('フォントサイズ', 20);

JS

abc.className="test";

JQuery

abc.removeClass() ;

abc.addClass("test");

9 チェック ボックスがオンになっているかどうかを確認します

jQuery

if( abc. attr("checked") == "checked")

注: インターネット上では、.attr("checked") == true は実際には使用できないと言われています。上記のテストは使用できます

関連する無料学習の推奨事項:
JavaScript

(ビデオ)

以上がjQueryとJavaScript、ajaxの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。