📖 第一章:初探 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 的角色

The role of HTML, CSS and 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 轉為新穎的 fetchpromise

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

於 HTML 中加入 jQuery

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

Codepen jQuery Setting

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

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

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

code.jquery.com

又或者,有時想快速加入 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 結構準備好哥刻,就會觸發,可以用。而佢背後用既,就係 DOMContentLoadedonreadystatechange 兩個 Event。

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

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

Next Page → 第二章:jQuery Selector 選取目標元素

← Previous Page 參考網址及書籍


Last updated at 2017-04-24. Show version history

Comments

no comments yet.