📖 第一章：初探 jQuery

以下，我們會先了解 jQuery 及 Web 的一些背景，及點解需要使用 jQuery。

咩係 jQuery？

jQuery 係 JavaScript 入面做負責控制同修改 HTML DOM 結構的工具箱 (Library)。

簡單黎講，我地平時用 jQuery 會進行兩個主要步驟：搜尋目標元素，進行改動。

例如：

$("#status").hide();

就係找出 id 為 status 的目標，然後使用 hide 指令進行隱藏。

基本 HTML/CSS

這個課程，會要求你識基本既 HTML／CSS。如果你本身 HTML／CSS 唔熟，可以用 Chat with Thomas 話我知，我可以俾一啲關於 HTML／CSS 嘅教學同練習給你。用黎打好個基礎。

又或者，可以先睇睇 shayhowe 寫既非常好嘅教學文。

http://learn.shayhowe.com/html-css/building-your-first-web-page/

HTML/CSS/JavaScript 的角色

• HTML 的作用係內容及結構
• CSS 的作用係描述視覺效果
• JavaScript 的作用係改變 HTML 內容、結構及狀態

JavaScript 與 jQuery 的關係

jQuery 是使用 JavaScript 撰寫的一個工具箱。工具箱意思是，可以簡便地做到唔同既功能，而呢啲功能，原本可能係需要寫多幾倍 Code 嚟達成。

JavaScript，或稱為 plain JS 或 Vanilla JavaScript，即冇添加任何外部代碼，只有瀏覽器直接支援 JavaScript。

係 2006 年 jQuery 推出嘅當年，各個瀏覽器支援 JavaScript 都有參差。不同瀏覽器有唔同方法去做同一個功能。jQuery 嘅推出，其中一個作用，就係推出一套統一嘅寫法，去方便 JavaScript Web application 既撰寫。

例如，以下係 jQuery 和 plain JS 既對比。

$("#sample"); // jQuery
document.getElementById("sample"); // plain JavaScript

//---

// jQuery to hide a target element.
$("#sample").hide(); 

// JavaScript
var element = document.getElementById("sample");
element.style.display = "none";

不過，隨著瀏覽器嘅進步，好多功能係唔同瀏覽器間已經統一，而選取元素亦有 querySelector 的出現，AJAX 亦由當年的 XMLHTTPRequest 轉為新穎的 fetch 及 promise。

當然，唔係話 jQuery 可以唔用了。仲有好多情況下，jQuery 依然表現出輕量得嚟又強勁嘅工具箱，入面好多實用嘅功能仍然好有用，如果轉用 plain JS，仲有好多地方唔方便。但如果只係寫幾句，唔太大型嘅話，就直接寫 plain JS 可能好好過為咗幾行 Code Load 一大套外部代碼入嚟。

於 HTML 中加入 jQuery

如果是使用 Codepen，作為一個網上編輯器，已經預設可以通過設定加入。方法是：Pen setting > JavaScript > Quick Add > jQuery。

但當離開咗呢啲 Sandbox。係檔案環境使用時，就需要直接在 HTML 載入 jQuery 的代碼。方法是，在 HTML 臨最後時加入以下代碼。

http://code.jquery.com/jquery-3.2.1.min.js

網址當中既版本號，可以因應需要轉換唔同既版本號。

又或者，有時想快速加入 jQuery，可以直接使用以下代碼。分別在於，以下網址會使用比較舊的 1.11 版本。所以適合快速攞黎用，但唔太適合 Production 環境用。

<script src='http://code.jquery.com/jquery.min.js'></script>

jQuery ready function

jQuery ready function 係確保運行既代碼，都係文件準備好後才運行。

$(document).ready(function(){
  // handle logic related to DOM.
});

或者，有個簡單既 Short-hand 版本：

$(function(){
  // handle logic related to DOM.
});

那為什麼要等文件準備好後才執行代碼？

因為 JavaScript 的主要用途是和 HTML DOM 元素互動，例如改變內容、處理用戶輸入事件等等。而這些代碼，如果 HTML 未完成載入，基本上都無用武之地。所以我地既 Code，都想係文件準備好後才運行。

然後你可能會話，點解唔用 window.onload 事件，而要用 jQuery ready function。

原因係，window.onload會等所有外部資源都 Load 好晒之後，才會觸發。而 ready 係會係 DOM 結構準備好哥刻，就會觸發，可以用。而佢背後用既，就係 DOMContentLoaded 及 onreadystatechange 兩個 Event。

*另一個地方看出 jQuery 帶來的好處，一個 jQuery ready function 入面會做左瀏覽器檢查，一個 ready function 背後，因應瀏覽器切換唔同做法。jQuery source code reference

然後我會話，既然橫掂都係要等個 HTML DOM 載入好，咁點解唔直接將段 JavaScript Code 放到最底？網頁既載入係由上至下的，所以載入完上方的 HTML 後，再載入 JavaScript 代碼然後執行，那麼其實就可以不用 jQuery ready function 了。