區分這三兄弟之前，我們先來看一下Web前端和Web後端的簡要結構和區別：
Web前端的三要素：
HTML（內容），
CSS（排版），
JS（行為，包含JavaScript和JQuery，實現網頁動態效果）；
Web後端：負責與資料庫互動，實現功能，資料儲存等；一般要求會寫java程式碼，會寫SQL語句，spring和iBatis等。

● 下面我們來區分JS部分的這三兄弟：
一、JavaScript
直譯為java指令碼語言，以下簡寫為JS；用來實現網頁的動態效果，例如彈窗、文字顯示、圖片輪換、超連結等；
何為java指令碼？
指令碼，在文學作品中可以理解為“劇本”，負責一場戲的結構框架和劇情大綱；
java指令碼，即JS，就是在</head>

eg：使用者滑鼠發生經過網頁上某些圖片、文字框、拖拽某張圖片等事件時，在JavaScript中用程式碼實現選取目標，然後繫結單擊事件，通過：
（1）function(res){ $("#id").text(res);}響應res對應語句（事先在對應servlet中寫好的response響應語句）；
（2）alert彈窗等；來實現網頁的動態效果。
★ 這裡插一下text( )的用法
text()方法：用來獲取或設定成對出現的標籤中的文字值
物件.text()：獲取文字值
物件.text(“new value”)：設定文字值

二、JQuery

1. 是JS的一個框架，寫在jsp頁面的<script 標籤中，表示式是 $( )，一般代替JS用於選擇器的作用；
2. JQuery是當前比較主流的 JavaScript 庫，封裝了很多預定義的物件和實現函式；
3. 相比JS，它可以大大簡化JavaScript指令碼語言的編寫，獲取物件，加單擊事件，實現動態效果（彈窗、顯示文字等）；

★ JQuery：$( )，寫在jsp頁面的</head標籤上的<script中；
EL表示式：${ }，寫在jsp頁面的<body標籤中
★ 使用JQuery之前，需要在WebContent下的script目錄中先加入下面這個兩個原始碼檔案

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
	寫入JQuery語句內容，可以接受任何型別的語句
	</script>	

JQuery表示式的主要用法：$(“選擇器”)、$(“物件”)（當前物件用this）
（1）定位元素：
$(“#id”)，根據id選擇
$(“標籤”)，根據標籤名選擇
$(“.class”)，依據類名選擇
（2）改變元素內容：
$("#id").text("new value")
（3）獲取元素內容：
$("#id").text( )
（4）繫結函式，文件全部執行完後才執行function函式中的內容
$( function( ){ } )

★ JS和JQuery對dom文件更改方式的區別：
JS是通過document.getElementById(“id值” )找到特定id值的dom並進行更改；
JQuery是用$("#id ")來找到特定id值的物件；

兩者都是定位元素，只是寫法不一樣，JQuery更簡潔，所以我們一般用JQuery代替了JS表示式。

三、Ajax
Ajax是JavaScript的另一個框架，是一門技術，用於傳送非同步請求，實現頁面的區域性更新。