JavaScript、jQuery、Ajaxの違いと接続

説明
簡単な要約：
1。JSはフロントエンド言語です。
2. Ajaxは、ページドキュメント全体ではなく、クライアントとサーバー間のデータ交換を使用してページの部分的な更新を実現する非同期更新メカニズムを提供するテクノロジーです。
3. jQueryは、JSをカプセル化して使いやすくするフレームワークです。jQueryはJSとAjaxの使用をより便利にします

関係のメタファー：
jsを木材と比較すると、jqueryはボードです（半製品）

1. JavaScript
javaScriptの短縮形はJSです。これは、クライアント側のWeb開発で広く使用されているスクリプト言語です。これは、動的関数をHTMLページに追加するためによく使用されます（JavaScriptによって記述されたプログラムは、HTMLまたはXMLページに埋め込んで直接表示できます）。デバイスでの解釈と実行）。
コンポーネント：
コア（ECMAScript）、ドキュメントオブジェクトモデル（DOM）、ブラウザオブジェクトモデル（BOM）

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

3. Ajax
AJAXは「AsynchronousJavaScriptand XML」（非同期JavaScriptおよびXML）の略です。AJAXは頭字語ではなく、Jesse JamesGaiiettによって作成された名詞です。インタラクティブなWebアプリケーションを作成するためのWeb開発テクノロジーを指します。

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

jQueryを使用すると、JavaScriptプログラムの記述を大幅に簡素化できます。jQueryを使用するには、最初にHTMLコードの先頭に次のようなjQueryライブラリへの参照を追加する必要があります。

//見積もり

ライブラリファイルはローカルに配置することも、有名企業のCDNを直接使用することもできます（CDNがjqueryをロードする利点）。これらの大企業のCDNの人気が高く、ユーザーがキャッシュしている可能性が高いという利点があります。彼らがあなたのウェブサイトを訪問する前に他のウェブサイトを訪問するとき、彼らはブラウザで、それはウェブサイトの開く速度をスピードアップすることができます。もう1つの利点は明らかで、Webサイトのトラフィック帯域幅を節約します。
jQuery公式http://code.jquery.com/jquery-1.6.min.js

1ポジショニング要素
JSdocument.getElementById
（ "abc"）

jQuery
$（ "＃abc"）IDによる配置
$（ "。abc"）クラスによる配置
$（ "div"）タグによる配置
$（this）現在の要素の配置

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

jQuery構文は、HTML要素を選択し、選択した要素に対して特定の操作を実行します。
基本構文：$（selector）.action（）
ドル記号は、jQuery
セレクター（セレクター）の「クエリ」および「検索」HTML要素を定義します。jQuery
のaction（）は、要素に対して操作を実行します。
例：
$（this）.hide（）-非表示現在の要素
$（ "p"）。hide（）-すべて非表示

要素
$（ "p.test"）。hide（）-class = "test"ですべてを非表示にします

要素
$（ "＃test"）。hide（）-id = "test"で要素を非表示にします

これはいくつかのテキストです。

最初のdiv要素にクラスを追加します

これはサンプルファイル（ "demo_test.txt"）の内容です。

jQuery AJAXは素晴らしい機能です！

これは段落のテキストです。

「demo_test.txt」ファイルのid = "p1"の要素のコンテンツを指定された場所にロードします

要素内：
$（ "＃div1"）。load（ "demo_test.txt＃p1"）;

Jqueryカスタムイベント
このイベントは、DOMツリー全体がロードされたときに発生します
$（document）.ready（function name（params）{ }）; //省略形$（function name（params）{ }）; //省略形$（function（）{ }）;

一重引用符と二重引用
符の使用引用符のタイプは、内側と外側で一貫していない必要があります（外側の二重引用符と内側の単一引用符を使用してみてください）
console.log（ "look'come 'here"）; //結果：look'come 'ここ
では、内側と外側の引用符のタイプが同じである特殊なケースです。\を使用してコンパイルを禁止し
ますconsole.log（' look'come 'here'）; //結果：look 'come'here

-------------------正しい
<inputtype = "button"οnclick= "alert（" popup "）" /> ---------- ------不正解

しかし、なぜJSのエスケープ文字\は効果がないのですか？
このコードはまだHTMLの管轄下にあるため、エスケープ文字はjavascriptではなくHTMLにする必要があります
。-------------------正しい

イベントバインディング
$（function（）{ //イベント1 $（ '。body-tab.header-btn'）。click（function（）{

        });
        事件一  由外向内：body   .body-tab   .header-btn
        $('body').on('click', '.body-tab .header-btn', function () {

        })
    });

}）

jQuery load（）メソッド
jQuery load（）メソッドは、シンプルですが強力なAJAXメソッドです。
load（）メソッドはサーバーからデータをロードし、返されたデータを選択された要素に配置します。
構文：
$（selector）.load（URL、data、callback）;

オプションのcallbackパラメーターは、load（）メソッドの完了後に許可されるコールバック関数を指定します。コールバック関数はさまざまなパラメーターを設定できます。responseTxt-
呼び出しが成功したときの結果コンテンツを
含みます
statusTXT-呼び出しのステータスを含みますxhr-XMLHttpRequestオブジェクトを含みます
次の例は、load（）メソッドが完了した後にプロンプトボックスを表示します。load（）メソッドが成功すると、「外部コンテンツが正常にロードされました！」と表示され、失敗すると、エラーメッセージが表示されます。
例
$（ "button"）。click（function（）{ $（ "＃ div1 "）。load（" Demo_test.txt "、function（responseTxt、statusTxt、xhr）{ if（statusTxt ==" success "）alert（"外部コンテンツが正常に読み込まれました！ "）; if（statusTxt ==" error "）alert（ "エラー：" + xhr.status + "：" + xhr.statusText）; }）; }）;

jQuery $ .get（）メソッド$ .get（）メソッドは、
HTTPGETリクエストを介してサーバーにデータをリクエストします。
構文：
$。get（URL、callback）;
必須のURLパラメーターは、要求するURLを指定します。
オプションのコールバックパラメータは、リクエストが成功した後に実行される関数の名前です。
次の例では、$。get（）メソッドを使用して、サーバー上のファイルからデータを取得します。
例
$（ "button"）。click（function（）{ $ .get（ "hello / test.json"、function（data 、status）{ alert（ "Data：" + data + "\ nStatus：" + status）; }）; }）;

jQuery $ .post（）メソッド$ .post（）メソッドは、
HTTPPOSTリクエストを介してサーバーにデータを送信します。
構文：
$。post（URL、data、callback）;

必須のURLパラメーターは、要求するURLを指定します。
オプションのdataパラメーターは、リクエストとともに送信されるデータを指定します。
オプションのコールバックパラメータは、リクエストが成功した後に実行される関数の名前です。
次の例では、$。post（）を使用して、リクエストとともにデータを送信します。
例
$（ "button"）。click（function（）{ $ .post（ "/ try / ajax / demo_test_post.php"、{ name： "ルーキーチュートリアル "、url：" http://www.runoob.com " }、function（data、status）{ alert（" Data：\ n "+ data +" \ nStatus： "+ status）; }）; } ）;

jQuery.parent（expr）、ノードを見つけます $（ " S P A n- " ）。 P A R＆lt E n- T （）または person$ （ "span"）。Parent（。 "Class"）
jQuery.parents（expr）、同様のjQuery.parents（expr）、ただし、親要素
jQuery.children（expr）に限らず、すべての祖先要素を検索し、すべての子ノードを返します。このメソッドは、すべての子孫ノード
jQuery.contents（）ではなく、直接の子ノードのみを返し、次のすべてを返します。コンテンツ、ノードとテキストを含みます。このメソッドとchildren（）の違いは、空白のテキストを含め、jQueryオブジェクトとしても返されることです
。children（）は、すべての兄弟ノード
jQueryではなく、前の兄弟ノードであるノードjQuery.prev（）のみを返します。 prevAll（）は、前のすべての兄弟ノード
jQuery.next（）を返し、すべての兄弟ノード
jQuery.nextAll（）ではなく、次の兄弟ノードを返し、後続のすべての兄弟ノード
jQuery.siblings（）を返し、
jQueryに関係なく、兄弟ノードを返します。 find（expr）、jQuery.filter（expr）とは完全に異なります。

jQuery.filter（）は、最初のjQueryオブジェクトコレクションの一部を除外し、

jQuery.find（）の戻り結果は、などの初期セットにコンテンツがありません。find（ $（ " p " ）。 F I N D （ " S P N " ）、是从 < p >> 人民元蘇オープンスタート探し < s p a n >> 、そして$ （ "p span"） $でも同じ$ $です$

JavaScript、jQuery、Ajaxの違いと接続

jQuery AJAXは素晴らしい機能です！

おすすめ