jQuery與JavaScript與ajax三者的區別與聯絡

駿馬傳奇發表於2020-11-08
jQueryJavaScript

原文地址:https://www.cnblogs.com/thomasbc/p/6650119.html

簡單總結：

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;
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實際上不能用，上面這個測試過能用

相關文章