jQuery JavaScript ajax差別是什麼

jQuery JavaScript ajax差異：1、javaScript廣泛用於客戶端Web開發的腳本語言，常用來為HTML網頁添加動態功能；2、AJAX創建互動式網頁應用的網頁開發技術；3、jQuery方便地為網站提供AJAX互動。

jQuery JavaScript ajax差異：

##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標準的表示；

##          Object使用Document
• ##          Object使用Document

  ##          Object使用Document

  ##          Object使用Document
## 
           使用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;

jQuery

abc. css('font-size', 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中文網其他相關文章！