JQ總務處｜初探｜深入淺出jQuery

前言

首先還是要謝謝我的神人朋友借我這本書（ 而且借了好幾年都還沒還哈哈哈 ），其實前面幾章已經看完很久，但一直懶得整理跟撰寫成文章，看來除了努力，我的人生還需要一點動力😅。

探索 jQuery

HTML 是一種處理文件結構的標記語言，而 CSS 控制著那些元素的外觀、感覺和位置， HTML 和 CSS 控制了網頁如何被建構及展示，但兩者皆不能增加行為到網頁。為此，我們需要一種指令稿語言（ scripting language ），這正是 jQuery 。
jQuery 是專門用以動態改變網頁文件（ document ）的 Javascript 程式庫（ library ）。

探索瀏覽器

瀏覽器使用 HTML 文物件模型（ HTML Document Object Model，DOM ），從 HTML 和 CSS 建立文字、圖像⋯⋯等等內容的頁面，而 JavaScript 和 JQuery 可以使用 DOM 來改變頁面的結構。

1. 瀏覽器載入從伺服器取得的 HTML 檔。
2. 瀏覽器的配置引擎解讀整個 HTML 和 CSS ，並利用 HTML 文物間模型（ DOM ）建造出一個文件（ document ）。
3. 瀏覽器在其 viewport 中展示頁面。
4. JS 直譯器參照 DOM ，對網頁進行修改而不需要重載它。

配置引擎：每個瀏覽器都有自己的配置引擎，才會對 CSS 有不同的解讀，解析完後再渲染畫面到用戶端。

JQuery 讓 DOM 保持單純

JQuery 雖然是 JavaScript ，但卻是一種更容易掌握的版本，當你想要控制 DOM 的時候， JQuery 讓這項工作輕鬆很多，例如我們想改頁面上段落元素內的 HTML 時：

JavaScript

document.getElementsByTagName("p")[0].innerHTML = "Change the page.";

JQuery

$("p").html("Change the page.");

可以看出程式碼的差別了嗎？
JQuery 使用「 選擇器引擎 」（ selector engine ），所以你可以像 CSS 一樣用選擇器取得某個東西，它的強項之一就是讓你操作 DOM ，而不需要知道它的每一個細節。

那 JQuery 是如何運作的？

1. 使用者觸發事件
2. JS 直譯器「 感受到 」有觸發事件，於是就執行附加在上的函式。
3. JS 直譯器改變該頁面的 DOM 表示。
4. 使用者看到函式的結果。

JS 直譯器不改變原始的 HTML 和 CSS 檔案，而是在瀏覽器的記憶體裡改變頁面的 DOM 表示。

介紹 JQuery 函式（ 及其快捷模式 ）

jQuery() 是 JQuery 函式，它的工作就是擷取你放進小括號裡的元素，而 $() 是 JQuery 函式的短名稱，這個快捷模式（ shortcut ）讓我們每次呼叫 JQuery 函式時，不需要多花時間撰寫這麼長的指令。

下面是能夠放進 JQuery 函式的三種東西：

1. CSS 選擇器
2. HTML
3. JavaScript Object

參考資料

深入淺出 jQuery （ Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 ）