Newest ⟷ Oldest
  1. Snapshot at 2017-04-24

    第一章:初探 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 了。

  2. Snapshot at 2017-04-10

    第一章:初探 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 了。

  3. Snapshot at 2017-04-10

    第一章:初探 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 了。

  4. Snapshot at 2017-04-10

    第一章—初探 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 了。

  5. Snapshot at 2017-04-03

    初探 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 了。

  6. Snapshot at 2017-04-03

    初探 jQuery

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

    基本 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 中加入 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。

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

  7. Snapshot at 2017-04-03

    課程準備

    整個課程會包括以下各個範疇:

    • jQuery 如何改變 HTML DOM Element。
    • 使用 addClass / removeClass 來改變 HTML Element 狀態。
    • 不同事件處理 Event Handling。
    • 構建 Slideshow 圖片幻燈片。
    • 使用 AJAX 存取網絡資源。
    • 建立 Plugin 重用常用代碼。

    而在我們這個課程,大部份例子會使用 Codepen 來呈現。Codepen 喺一個輕量網上編輯器,支援 HTML/CSS/JavaScript 及他們的 Pre-Processor。

    使用 Codepen 基本使用

    基本 HTML/CSS

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

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

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

    於 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.
    });
    

    那為什麼要等文件準備好後才

    When to use jQuery ready function?

    Use it when you put your Javascript in the (Before your body content)

    Otherwise, we should put the Javascript before closing the tag, which the browser loads and executes the JavaScript after loading all the content HTML.

    In normal case, placing the JavaScript at the end has all the benefits.

    It is faster because browser loads the content before encountering the script tag.

    It also gets rid of the jQuery ready function because now when the JavaScript code runs, the content HTML must be loaded because the content is placed before the script.