簡單總結(jié)：

1、JS是一門前端語言。

2、Ajax是一門技術(shù)，它提供了異步更新的機制，使用客戶端與服務(wù)器間交換數(shù)據(jù)而非整個頁面文檔，實現(xiàn)頁面的局部更新。

3、jQuery是一個框架，它對JS進行了封裝，使其更方便使用。jQuery使得JS與Ajax的使用更方便

關(guān)系比喻：

若把js比作木頭，那么jquery就是木板（半成品）

jQuery與ajax都是js的一個框架，各有各的功能，若js是父親的話，jquery與ajax就是兩個兒子

詳細(xì)情況：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">1.javascript是一種在客戶端執(zhí)行的腳本語言。ajax是基于javascript的一種技術(shù)，它主要用途是提供異步刷新（只刷新頁面的一部分，而不是整個頁面都刷新）。一個是語言,一個是技術(shù),兩者有本質(zhì)區(qū)別.</pre>

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; color: rgb(0, 0, 0); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">2.javascript是一種在瀏覽器端執(zhí)行的腳本語言，Ajax是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的開發(fā)技術(shù) ，它是利用了一系列相關(guān)的技術(shù)其中就包括javascript。</pre>

1、JavaScript

javaScript的簡寫形式就是JS，一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能（其編寫的程序可以被嵌入到HTML或XML頁面中，并直接在瀏覽器中解釋執(zhí)行）。

• 組成部分：

       核心（ECMAScript）、文檔對象模型（Document Object Model，簡稱DOM）、瀏覽器對象模型（Browser Object Model，簡稱BOM）
  
      [圖片上傳失敗...(image-652115-1530611939845)]
  

• 描述：

  Javascript就是適應(yīng)動態(tài)網(wǎng)頁制作的需要而誕生的一種新的編程語言，如今越來越廣泛地使用于Internet網(wǎng)頁制作上。

  Javascript的出現(xiàn)使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時性的、動態(tài)的、交互性的關(guān)系，使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容。

  Javascript短小精悍，又是在客戶機上執(zhí)行的，大大提高了網(wǎng)頁的瀏覽速度和交互能力。同時它又是專門為制作Web網(wǎng)頁而量身定做的一種簡單的編程語言。

2、Ajax

     AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJAX并非縮寫詞，而是由Jesse James Gaiiett創(chuàng)造的名詞，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

• 組成：

      基于XHTML和CSS標(biāo)準(zhǔn)的表示；
  
     使用Document Object Model進行動態(tài)顯示和交互；
  
     使用XML和XSLT做數(shù)據(jù)交互和操作；
  
     使用XML HttpRequest與服務(wù)器進行異步通信；
  
     使用JavaScript綁定一切。
  

• 描述：

      Ajax是結(jié)合了[Java](http://lib.csdn.net/base/javase "Java SE知識庫")技術(shù)、XML以及JavaScript等編程技術(shù)，可以讓開發(fā)人員構(gòu)建基于Java技術(shù)的Web應(yīng)用，并打破了使用頁面重載的管理。
  
     Ajax技術(shù)使用非同步的HTTP請求，在Browser和Web Server之間傳遞數(shù)據(jù)，使Browser只更新部分網(wǎng)頁內(nèi)容而不重新載入整個網(wǎng)頁。
  
    Ajax是使用客戶端腳本與Web服務(wù)器交換數(shù)據(jù)的Web應(yīng)用開發(fā)方法。這樣，Web頁面不用打斷交互流程進行重新加裁，就可以動態(tài)地更新。使用Ajax，用戶可以創(chuàng)建接近本地桌面應(yīng)用的直接、高可用、更豐富、更動態(tài)的Web用戶界面
  

3、jQuery

jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。

• 特點：

     jQuery是當(dāng)前很流行的一個JavaScript框架，使用類似于CSS的選擇器，可以方便的操作HTML元素，擁有很好的可擴展性，擁有不少插件。 
  

• 描述：

      對于程序員來說，簡化javascript和ajax編程，能夠使程序員從設(shè)計和書寫繁雜的JS應(yīng)用中解脫出來，將關(guān)注點轉(zhuǎn)向功能需求而非實現(xiàn)細(xì)節(jié)上，從而提高項目的開發(fā)速度。
  
     對于用戶來說，改善了頁面的視覺效果，增強了與頁面的交互性，體驗更絢麗的網(wǎng)頁物資。
  
    javaScript框架實際上是一系列工具和函數(shù)。
  

二、三者的關(guān)系

    下面我用一張導(dǎo)圖來闡述這三者的關(guān)系：

image

[圖片上傳失敗...(image-bd0661-1530611939845)]

解釋：

     javaScript是用于Web客戶端開發(fā)的腳本語言，Ajax是基于JS語言，主要組合JS、CSS、XML三種技術(shù)的新技術(shù)，是用于創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。jQuery是JS的框架，基于JS語言，集合Ajax技術(shù)開發(fā)出來的JS庫，封裝JS和Ajax的功能，提供函數(shù)接口，大大簡化了Ajax，JS的操作。

項目中用jQuery比較多，具體講講他。

jQuery能大大簡化JavaScript程序的編寫

要使用jQuery，首先要在HTML代碼最前面加上對jQuery庫的引用，比如：

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

庫文件既可以放在本地，也可以直接使用知名公司的CDN（CDN加載jquery的好處），好處是這些大公司的CDN比較流行，用戶訪問你網(wǎng)站之前很可能在訪問別的網(wǎng)站時已經(jīng)緩存在瀏覽器中了，所以能加快網(wǎng)站的打開速度。另外一個好處是顯而易見的，節(jié)省了網(wǎng)站的流量帶寬。

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寫法在執(zhí)行常見操作時的區(qū)別如下：

1 定位元素
JS
document.getElementById("abc")

jQuery
("#abc") 通過id定位(".abc") 通過class定位
$("div") 通過標(biāo)簽定位

需要注意的是JS返回的結(jié)果是這個元素，jQuery返回的結(jié)果是一個JS的對象。以下例子中假設(shè)已經(jīng)定位了元素abc。

2 改變元素的內(nèi)容
JS
abc.innerHTML = "test"; //現(xiàn)在的項目中有用到
jQuery
abc.html("test");

3 顯示隱藏元素
JS
abc.style.display = "none"; //現(xiàn)在的項目中有用到
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 設(shè)置元素不可用
JS
abc.disabled = true;
jQuery
abc.attr("disabled", true);

8 修改元素樣式 JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);

JS
abc.className="test";
JQuery
abc.removeClass();
abc.addClass("test");

9 ****判斷復(fù)選框是否選中

jQuery
if(abc.attr("checked") == "checked")
注意：網(wǎng)上說的.attr("checked") == true實際上不能用，上面這個測試過能用