單總結：

1、JS是一門前端語言。

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

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

關系比喻：

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

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

詳細情況：

1.javascript是一種在客戶端執行的腳本語言。ajax是基于javascript的一種技術，它主要用途是提供異步刷新（只刷新頁面的一部分，而不是整個頁面都刷新）。一個是語言,一個是技術,兩者有本質區別.

2.javascript是一種在瀏覽器端執行的腳本語言，Ajax是一種創建交互式網頁應用的開發技術 ，它是利用了一系列相關的技術其中就包括javascript。

1、JavaScript

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

• 組成部分：

核心（ECMAScript）、文檔對象模型（Document Object Model，簡稱DOM）、瀏覽器對象模型（Browser Object Model，簡稱BOM）

Javascript就是適應動態網頁制作的需要而誕生的一種新的編程語言，如今越來越廣泛地使用于Internet網頁制作上。

Javascript的出現使得網頁和用戶之間實現了一種實時性的、動態的、交互性的關系，使網頁包含更多活躍的元素和更加精彩的內容。

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

2、Ajax

AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJAX并非縮寫詞，而是由Jesse James Gaiiett創造的名詞，是指一種創建交互式網頁應用的網頁開發技術。

• 組成：

基于XHTML和CSS標準的表示；

使用Document Object Model進行動態顯示和交互；

使用XML和XSLT做數據交互和操作；

使用XML HttpRequest與服務器進行異步通信；

使用JavaScript綁定一切。

• 描述：

Ajax是結合了Java技術、XML以及JavaScript等編程技術，可以讓開發人員構建基于Java技術的Web應用，并打破了使用頁面重載的管理。

Ajax技術使用非同步的HTTP請求，在Browser和Web Server之間傳遞數據，使Browser只更新部分網頁內容而不重新載入整個網頁。

Ajax是使用客戶端腳本與Web服務器交換數據的Web應用開發方法。這樣，Web頁面不用打斷交互流程進行重新加裁，就可以動態地更新。使用Ajax，用戶可以創建接近本地桌面應用的直接、高可用、更豐富、更動態的Web用戶界面

3、jQuery

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

• 特點：

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

• 描述：

對于程序員來說，簡化javascript和ajax編程，能夠使程序員從設計和書寫繁雜的JS應用中解脫出來，將關注點轉向功能需求而非實現細節上，從而提高項目的開發速度。

對于用戶來說，改善了頁面的視覺效果，增強了與頁面的交互性，體驗更絢麗的網頁物資。

javaScript框架實際上是一系列工具和函數。

二、三者的關系

下面我用一張導圖來闡述這三者的關系：

解釋：

javaScript是用于Web客戶端開發的腳本語言，Ajax是基于JS語言，主要組合JS、CSS、XML三種技術的新技術，是用于創建交互式網頁應用的網頁開發技術。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比較流行，用戶訪問你網站之前很可能在訪問別的網站時已經緩存在瀏覽器中了，所以能加快網站的打開速度。另外一個好處是顯而易見的，節省了網站的流量帶寬。

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") 通過class定位 $("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;

jQueryabc.css('font-size', 20);

JS

abc.className="test";

JQueryabc.removeClass();

abc.addClass("test");

9 判斷復選框是否選中

jQuery

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

JS和JQUERY的區別

①.根據ID取元素

{

JS:取到的是一個DOM對象。

　　例：var div=document.getElementByID("one");

JQUERY:取到的是一個JQUERY對象。

　　例：var div=$("#one");——括號里面是根據某個東西來找，相當于一個選擇，如果我們要根據ID來找，在樣式表里的ID是用#來表示的，所以在這里我們直接帶入井號，整句的意思就是根據ID為one的來查找。

}

②.根據class取元素，在數組里面如果要取DOM對象使用索引的方式，如果要取JQUERY對象使用eq()

{

JS:取到的是一個數組

　　例：var div=document.ElementsByClassName("test");

JQUERY:

　　例：var div=$(".test");

}

③.根據name取元素

{

JS：返回的是一個數組

　　例：var bd=document.getElementsByName(uid);

JQUERY：的方式是用 方括號，屬性=一個值，不限制非要根據name來取值，JQUERY是根據屬性來取元素

　　例：$("[name='uid']");

}

④.根據標簽名取元素

{

JS：返回的也是一個數組

　　例：var div=document.getElementsByTagName("div");

JQUERY：和樣式表里面給所有div加樣式的方法一樣，在雙引號內直接寫標簽名

　　例：$("div");

}

附：JQUERY的其他取值方式

組合選取：var div=$("div span");——有很多組合方式

*******************************************************************

操作內容

　　①.非表單元素（如果是文本就用text方法，如果是html代碼就用html方法）

　　　　{

　　　　　　例：div.text();——無參數的情況下是取值

　　　　　　div.text("aaaa");——有參數的情況下是賦值

　　　　　　div.html();——無參數的情況下是取值

　　　　　　div.html("aaaa");——有參數的情況下是賦值

　　　　}

　　②.表單元素

　　　　{

　　　　　　JS：div.value;——取值；div.value=xxx;——賦值

　　　　　　JUQERY：div.val();——無參數是取值，有參數是賦值。

　　　　}

*******************************************************************

操作屬性

JS里面用來操作屬性的方法是

div.setAttribute("","");——設置屬性、修改屬性

div.removeAttribute("");——移除屬性，引號里面寫一個屬性名

div.getAttribute();——獲取屬性

JQUERY里面用來操作屬性的方法

添加屬性：div.attr("test","aa");——給這個attr方法加入參數，屬性名叫做test，屬性的值是aa

移除屬性：div.removeAttr("test");——移除test這條屬性

獲取屬性：div.attr("test");——在attr方法里面直接寫入一個屬性的名就可以了

*******************************************************************

操作樣式

JS里面操作樣式的關鍵字是style

例：div.style.backgroundColor="red";——把這個div的背景色設置成為了紅色

JQUERY里面操作樣式的關鍵字是css

例：div.css("background-color","yellow");——把這個div的背景色變為黃色，在這里CSS里面所有的樣式和css樣式表里面的樣式是一模一樣的沒有任何變化

　　JS操作樣式的方法只能獲取內聯樣式，不能取內嵌的和外部的！！！！！

　　JQUERY操作樣式的方法可以是內聯的也可以是內嵌的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$.get("xml/test.xml", function(data){
				var book_list=$(data).find('book');
				
				var book_length=book_list.length;
				var i=0;
				var range;
				var author;
				var target;
				book_list.each(function(index, value){
					
					range=$(this).children('range').text();
					author=$(this).children('author').text();
					target=$(this).children('target').text();
					
					console.log(range+' '+author+' '+target);
					
				});
			},'xml');
		});
		</script>
	</head>
	<body>
	</body>
</html>
<!--
<?xml version="1.0" encoding="utf-8" ?>
<bookstore>
 <book>
 <range>前端專區1</range>
 <author>螞蟻部落</author>
 <target>css教程</target>
 </book>
 <book>
 <range>前端專區</range>
 <author>螞蟻部落</author>
 <target>div教程</target>
 </book>
 <book>
 <range>資源專區</range>
 <author>softwhy.com</author>
 <target>特效下載</target>
 </book>
 <book>
 <range>前端專區</range>
 <author>softwhy.com</author>
 <target>教程下載</target>
 </book>
</bookstore>
-->