Day17_AJAX & JQuery-1

第 12 屆 iThome 鐵人賽

DAY 17

Modern Web

前端網頁設計學習旅程系列第 17 篇

12th鐵人賽

髮量稀疏的中年大叔

2020-09-29 21:45:39

519 瀏覽

分享至

AJAX

Asynchronous JavaScript and XML（AJAX）是一種編程技術，利用 JavaScript 和 XMLHTTPRequest 對Web瀏覽器和Web服務器之間交換數據。

AJAX幾乎是Web 2.0應用程序的代名詞，用於增強網頁的交互性。 AJAX為開發人員提供了一種方法，通過它可以實時更新頁面的各個部分，而無需重新加載頁面的所有內容。過去，如果需要更新網頁中的特定內容，則會從Web服務器重新加載整個頁面，從而導致傳輸大量重複數據。

使用AJAX，可以根據用戶操作（例如，單擊按鈕或將鼠標懸停在圖像上），時間間隔（例如，每5秒）或特定於應用程序的邏輯（例如，當用戶選擇一個美國州，然後加載適用城市的列表）。

JQuery

jQuery是John Resig在2006年創建的一個快速簡潔的JavaScript庫，它的座右銘是：少寫，多做。 jQuery簡化了HTML文檔的遍歷，事件處理，動畫和Ajax交互，從而實現了快速的Web開發。 jQuery是一個JavaScript工具箱，旨在通過減少代碼編寫來簡化各種任務。以下是一些jQuery的特性

Event handling

jQuery提供了一種優雅的方式來捕獲各種各樣的事件，例如用戶單擊鏈接，而無需使用事件處理程序將HTML代碼本身弄亂

Animations

jQuery帶有許多內置的動畫效果，可以在網站中使用它們

Lightweight

jQuery是一個非常輕量級的庫-大小約為19KB

Latest Technology

jQuery支持CSS3選擇器和基本XPath語法

下面是一個簡單的jQuery範例

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

呈現的結果就會是