---
title: jQuery互動設計和Ajax交互
tags: 暑假
---
jQuery互動設計和Ajax交互
===
AJAX 是與伺服器交換數據並更新部分網頁的技術，而不需要重新加載整個網頁。

jQuery
---
是一套JavaScript 函式庫，可以撰寫各種網頁效果它的主要作用是操縱網頁的 DOM(Document Object Model)：瀏覽器會解析 HTML 然後顯示在畫面上，這個解析出來的結構就叫做 DOM，在瀏覽器內部這是一個樹狀的資料結構：

html
  - head
    - title
     - a web page
  - body class="home"
    - h1 id="header"
     - a headline
    - p
     - some
     - span
      - text
     - text

瀏覽器提供了 DOM API 讓開發者可以操縱這些結構，透過 jQuery 我們可以很方便地從 HTML 取得要操縱的 HTML 元素，並在 DOM 裡面進行插入、修改、刪除元素，這樣瀏覽器的畫面就會跟著變化了

jQuery 庫包含以下特性
---
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和動畫
[HTML DOM 遍歷和修改](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction)
AJAX
[Utilities](https://javascript.ruanyifeng.com/jquery/utility.html)
>jQuery對象本身還提供一些方法（即直接定義jQuery對像上面），不需要生成實例就能使用。由於這些方法類似“通用工具”的性質，所以我們把它們稱為“工具方法”（utilities）。

----

---
參考網頁

>[JQuery EasyUi之界面设计——母版页以及Ajax的通用处理（三）](https://cloud.tencent.com/developer/article/1378449)

>[[JS] AJAX 筆記](
https://medium.com/%E9%A6%AC%E6%A0%BC%E8%95%BE%E7%89%B9%E7%9A%84%E5%86%92%E9%9A%AA%E8%80%85%E6%97%A5%E8%AA%8C/js-ajax-%E7%AD%86%E8%A8%98-b9a57976fa60)

>[Rails實戰聖經](https://ihower.tw/rails/fullstack-jquery.html)

>[jQuery AJAX 简介](https://www.w3school.com.cn/jquery/jquery_ajax_intro.asp)

>[洛奇的邪惡組織手札([基礎課程] jQuery 教學（二）：Ajax 技術)](https://summer10920.github.io/2020/04-29/jq-baseclass-2/#%E8%AA%9E%E6%B3%95%E8%AA%AA%E6%98%8E)