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

    第三章 事件處理 Events and Function handler

    事件處理 Event handling

    jQuery 中其中一個最常撰寫的代碼,就係事件處理。因為其中一個經常需要修改 HTML DOM 的情況,就係用家對界面作出了改變。而用家對界面做既所有操作,都會觸發事件。

    jQuery 官網有幾個例子:

    http://learn.jquery.com/events/handling-events/

    例子:

    $("a").on("click", function() {
        console.log( "a link was clicked" );
    });
    

    Delegation

    Delegation 意思是交俾 jQuery 幫忙,對所選範圍內的目標 Selector,無論現在及將來,都自動添加事件處理。

    範例:

    $("#todo-list").delegate('li', 'click', function(){
      $(this).toggleClass('done');
    });
    

    Codepen 範例

    See the Pen list event sample by Thomas Seng Hin Mak (@makzan) on CodePen.

    Video

    在影片中,我示範了用 click, delegate click 及 on 的寫法。

    使用 jQuery each

    平常要對一堆 DOM element 做改動,只需要直接套用到 jQuery 集合,唔使用 for-loop 逐個逐個套用。

    例如:

    
    $("p").addClass("foo");
    
    $(".error").hide();
    
    $("#todo-list li").click(function(){
      $(this).toggleClass("done");
    });
    

    但如果想針對集合內的每一個元素進行處理,可以使用 .each。

    $('selector').each(function(){
      // each of the matched element
      $(this).something();
    });
    

    例如可能想拿取每一個元素的資料再作處理:

    $('a').each(function(){
      // 拿取 href
      var href = $(this).attr('href');
    
      // 拿取內容
      var text = $(this).text();
    
      // 再處理
      $(this).blahBlahBlah(href, text);
    });
    

    另一個範例—輸入任意個名字

    http://codepen.io/makzan/pen/vEQddR

    Screenshot of the example

    See the Pen Demo on jQuery delegate, each by Thomas Seng Hin Mak (@makzan) on CodePen.

    Keycode

    以上例子中,我們用到 keydown。當按下鍵盤後,另一個常見的動作是探測按鍵內容,是 A-Z?是 Enter?空白?還是方向鍵?

    $('input').keyup(function(event){
      console.log(event.keyCode); // log the keyboad event to console.
    });
    

    加內容、減內容

    另一個常用動作,是 prepend 及 append。都是在目標元素內加入內容。

    另外,如果需要移除,有 remove, empty, detach。

    複製 Clone

    加內容可以直接打內容,但更好的方法是複製一個現有的 template DOM。

    // 直接打內容
    $("#list").append("<li><a href='http://example.com'>hello</a></li>");
    

    Clone:

    <div id='template'>
      <ul>
        <li class='item'>
          <a href='#'>Text</a>
        </li>
      </ul>
    </div>
    
    var clone = $("#template").find(".item").clone();
    clone.find("a").attr('href','http://example.com');
    clone.find("a").text("hello");
    $("#list").append(clone);
    

    雖然係長啲,但管理及修改更容易。

    以下範例示範了利用 template+clone 的方法來加動態加減內容。

    http://codepen.io/makzan/pen/RNEgvz

    prop 及 attr

    範例中涉及修改 submit button 嘅狀態。係 jQuery,prop 同 attr 都好類似。但 StackOverflow 上有討論什麼時候用 prop。

    http://stackoverflow.com/a/13626565

    Basically, prop() should be used when getting or setting properties (such as autoplay, checked, disabled and required amongst others).

    不同的常見事件


    Bonus: JavaScript Function

    Mozilla 有一份詳細的 function 使用說明:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

    簡體版:

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions

    Eloquent JavaScript 是一本非常好的 JavaScript 書,其中的 Function 一章詳細說明了更多用法,包括多重 Function。

    Understanding the this in JavaScript

    JavaScript 中的 this 和傳統 OOP 的有點不同。this 不是永遠指著當前的 object instance,this 是指著當前的 function call 的 context。咩係 context? 即係邊個 call 個 function。例如:

    var obj = {
      hello: function() {
        console.log('hi', this);
      }
    }
    
    obj.hello(); // this 指著 obj
    
    var hello = function() {
      console.log('hi', this);
    }
    
    hello(); // this 指著 undefined (或 window)
    

    更多例子:

    function foo() {
      console.log(this);
    }
    window.foo(); // `this` refers to window.
    
    var objectA = {
      hello: function(){
        console.log(this);
      }
    };
    objectA.hello(); // `this` refers to `objectA`.
    

    更複雜,call function 時係可以指明個 context 做邊個都得:

    var objectA = {
      hello: function(){
        console.log(this);
      }
    };
    objectA.hello.call(window); // ** `this` refers to `window`.
    

    當事件觸發時,我們利用 jQuery 定義的事件會被觸發,觸發 function 的 context,會自動設定成目標 DOM element。所以可以直接用 this 來存取事件的主角—那個 DOM 元素。

    $('#input').keydown(function(){
      console.log(this);  // `this` refers to the `#input`.
    });
    

    又係 MDN 時間。this 的詳情:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

    進階: Object and Prototype

    JavaScript 的物件導向 OOP 就係透過 Function 加 prototype 完成。唔係必須要明白,但想略知一二,可以參考 Eloquent Javascript。

  2. Snapshot at 2017-04-24

    第三章 事件處理 Events and Function handler

    事件處理 Event handling

    jQuery 中其中一個最常撰寫的代碼,就係事件處理。因為其中一個經常需要修改 HTML DOM 的情況,就係用家對界面作出了改變。而用家對界面做既所有操作,都會觸發事件。

    jQuery 官網有幾個例子:

    http://learn.jquery.com/events/handling-events/

    例子:

    $("a").on("click", function() {
        console.log( "a link was clicked" );
    });
    

    Delegation

    Delegation 意思是交俾 jQuery 幫忙,對所選範圍內的目標 Selector,無論現在及將來,都自動添加事件處理。

    範例:

    $("#todo-list").delegate('li', 'click', function(){
      $(this).toggleClass('done');
    });
    

    Codepen 範例

    See the Pen list event sample by Thomas Seng Hin Mak (@makzan) on CodePen.

    Video

    在影片中,我示範了用 click, delegate click 及 on 的寫法。

    使用 jQuery each

    平常要對一堆 DOM element 做改動,只需要直接套用到 jQuery 集合,唔使用 for-loop 逐個逐個套用。

    例如:

    
    $("p").addClass("foo");
    
    $(".error").hide();
    
    $("#todo-list li").click(function(){
      $(this).toggleClass("done");
    });
    

    但如果想針對集合內的每一個元素進行處理,可以使用 .each。

    $('selector').each(function(){
      // each of the matched element
      $(this).something();
    });
    

    例如可能想拿取每一個元素的資料再作處理:

    $('a').each(function(){
      // 拿取 href
      var href = $(this).attr('href');
    
      // 拿取內容
      var text = $(this).text();
    
      // 再處理
      $(this).blahBlahBlah(href, text);
    });
    

    另一個範例—輸入任意個名字

    http://codepen.io/makzan/pen/vEQddR

    Screenshot of the example

    See the Pen Demo on jQuery delegate, each by Thomas Seng Hin Mak (@makzan) on CodePen.

    prop 及 attr

    範例中涉及修改 submit button 嘅狀態。係 jQuery,prop 同 attr 都好類似。但 StackOverflow 上有討論什麼時候用 prop。

    http://stackoverflow.com/a/13626565

    Basically, prop() should be used when getting or setting properties (such as autoplay, checked, disabled and required amongst others).

    不同的常見事件


    Bonus: JavaScript Function

    Mozilla 有一份詳細的 function 使用說明:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

    簡體版:

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions

    Eloquent JavaScript 是一本非常好的 JavaScript 書,其中的 Function 一章詳細說明了更多用法,包括多重 Function。

    Understanding the this in JavaScript

    JavaScript 中的 this 和傳統 OOP 的有點不同。this 不是永遠指著當前的 object instance,this 是指著當前的 function call 的 context。咩係 context? 即係邊個 call 個 function。例如:

    var obj = {
      hello: function() {
        console.log('hi', this);
      }
    }
    
    obj.hello(); // this 指著 obj
    
    var hello = function() {
      console.log('hi', this);
    }
    
    hello(); // this 指著 undefined (或 window)
    

    更多例子:

    function foo() {
      console.log(this);
    }
    window.foo(); // `this` refers to window.
    
    var objectA = {
      hello: function(){
        console.log(this);
      }
    };
    objectA.hello(); // `this` refers to `objectA`.
    

    更複雜,call function 時係可以指明個 context 做邊個都得:

    var objectA = {
      hello: function(){
        console.log(this);
      }
    };
    objectA.hello.call(window); // ** `this` refers to `window`.
    

    當事件觸發時,我們利用 jQuery 定義的事件會被觸發,觸發 function 的 context,會自動設定成目標 DOM element。所以可以直接用 this 來存取事件的主角—那個 DOM 元素。

    $('#input').keydown(function(){
      console.log(this);  // `this` refers to the `#input`.
    });
    

    又係 MDN 時間。this 的詳情:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

    進階: Object and Prototype

    JavaScript 的物件導向 OOP 就係透過 Function 加 prototype 完成。唔係必須要明白,但想略知一二,可以參考 Eloquent Javascript。

  3. Snapshot at 2017-04-24

    第三章 事件處理 Events and Function handler

    事件處理 Event handling

    jQuery 中其中一個最常撰寫的代碼,就係事件處理。因為其中一個經常需要修改 HTML DOM 的情況,就係用家對界面作出了改變。而用家對界面做既所有操作,都會觸發事件。

    jQuery 官網有幾個例子:

    http://learn.jquery.com/events/handling-events/

    例子:

    $("a").on("click", function() {
        console.log( "a link was clicked" );
    });
    

    Delegation

    Delegation 意思是交俾 jQuery 幫忙,對所選範圍內的目標 Selector,無論現在及將來,都自動添加事件處理。

    範例:

    $("#todo-list").delegate('li', 'click', function(){
      $(this).toggleClass('done');
    });
    

    Codepen 範例

    See the Pen list event sample by Thomas Seng Hin Mak (@makzan) on CodePen.

    Video

    在影片中,我示範了用 click, delegate click 及 on 的寫法。

    使用 jQuery each

    平常要對一堆 DOM element 做改動,只需要直接套用到 jQuery 集合,唔使用 for-loop 逐個逐個套用。

    例如:

    
    $("p").addClass("foo");
    
    $(".error").hide();
    
    $("#todo-list li").click(function(){
      $(this).toggleClass("done");
    });
    

    但如果想針對集合內的每一個元素進行處理,可以使用 .each。

    $('selector').each(function(){
      // each of the matched element
      $(this).something();
    });
    

    例如可能想拿取每一個元素的資料再作處理:

    $('a').each(function(){
      // 拿取 href
      var href = $(this).attr('href');
    
      // 拿取內容
      var text = $(this).text();
    
      // 再處理
      $(this).blahBlahBlah(href, text);
    });
    

    另一個範例—輸入任意個名字

    http://codepen.io/makzan/pen/vEQddR

    Screenshot of the example

    See the Pen Demo on jQuery delegate, each by Thomas Seng Hin Mak (@makzan) on CodePen.

    prop 及 attr

    範例中涉及修改 submit button 嘅狀態。係 jQuery,prop 同 attr 都好類似。但 StackOverflow 上有討論什麼時候用 prop。

    http://stackoverflow.com/a/13626565

    不同的常見事件


    Bonus: JavaScript Function

    Mozilla 有一份詳細的 function 使用說明:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

    簡體版:

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions

    Eloquent JavaScript 是一本非常好的 JavaScript 書,其中的 Function 一章詳細說明了更多用法,包括多重 Function。

    Understanding the this in JavaScript

    JavaScript 中的 this 和傳統 OOP 的有點不同。this 不是永遠指著當前的 object instance,this 是指著當前的 function call 的 context。咩係 context? 即係邊個 call 個 function。例如:

    var obj = {
      hello: function() {
        console.log('hi', this);
      }
    }
    
    obj.hello(); // this 指著 obj
    
    var hello = function() {
      console.log('hi', this);
    }
    
    hello(); // this 指著 undefined (或 window)
    

    更多例子:

    function foo() {
      console.log(this);
    }
    window.foo(); // `this` refers to window.
    
    var objectA = {
      hello: function(){
        console.log(this);
      }
    };
    objectA.hello(); // `this` refers to `objectA`.
    

    更複雜,call function 時係可以指明個 context 做邊個都得:

    var objectA = {
      hello: function(){
        console.log(this);
      }
    };
    objectA.hello.call(window); // ** `this` refers to `window`.
    

    當事件觸發時,我們利用 jQuery 定義的事件會被觸發,觸發 function 的 context,會自動設定成目標 DOM element。所以可以直接用 this 來存取事件的主角—那個 DOM 元素。

    $('#input').keydown(function(){
      console.log(this);  // `this` refers to the `#input`.
    });
    

    又係 MDN 時間。this 的詳情:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

    進階: Object and Prototype

    JavaScript 的物件導向 OOP 就係透過 Function 加 prototype 完成。唔係必須要明白,但想略知一二,可以參考 Eloquent Javascript。

  4. Snapshot at 2017-04-24

    第三章 事件處理 Events and Function handler

    This is lecture 3 of the Beginning jQuery course. In this lecture, we focus on the JavaScript function and jQuery events handling methods.

    係呢一章,我地會睇幾個事件處理示例。

    事件處理 Event handling

    jQuery 中其中一個最常撰寫的代碼,就係事件處理。因為其中一個經常需要修改 HTML DOM 的情況,就係用家對界面作出了改變。而用家對界面做既所有操作,都會觸發事件。

    Handling events is one of the most common tasks when writing jQuery. We often need to respond to user’s actions and provide appropriate feedbacks. The following jQuery’s events handling documentation provides a getting started guide.

    jQuery 官網有幾個例子:

    http://learn.jquery.com/events/handling-events/

    例子:

    $("a").on("click", function() {
        console.log( "a link was clicked" );
    });
    

    Delegation

    Delegation 意思是交俾 jQuery 幫忙,對所選範圍內的目標 Selector,無論現在及將來,都自動添加事件處理。

    範例:

    $("#todo-list").delegate('li', 'click', function(){
      $(this).toggleClass('done');
    });
    

    Codepen 範例

    See the Pen list event sample by Thomas Seng Hin Mak (@makzan) on CodePen.

    Video

    在影片中,我示範了用 click, delegate click 及 on 的寫法。

    使用 jQuery each

    平常要對一堆 DOM element 做改動,只需要直接套用到 jQuery 集合,唔使用 for-loop 逐個逐個套用。

    例如:

    
    $("p").addClass("foo");
    
    $(".error").hide();
    
    $("#todo-list li").click(function(){
      $(this).toggleClass("done");
    });
    

    但如果想針對集合內的每一個元素進行處理,可以使用 .each。

    $('selector').each(function(){
      // each of the matched element
      $(this).something();
    });
    

    例如可能想拿取每一個元素的資料再作處理:

    $('a').each(function(){
      // 拿取 href
      var href = $(this).attr('href');
    
      // 拿取內容
      var text = $(this).text();
    
      // 再處理
      $(this).blahBlahBlah(href, text);
    });
    

    另一個範例—輸入任意個名字

    http://codepen.io/makzan/pen/vEQddR

    Screenshot of the example

    See the Pen Demo on jQuery delegate, each by Thomas Seng Hin Mak (@makzan) on CodePen.

    prop 及 attr

    範例中涉及修改 submit button 嘅狀態。係 jQuery,prop 同 attr 都好類似。但 StackOverflow 上有討論什麼時候用 prop。

    http://stackoverflow.com/a/13626565

    不同的常見事件


    Bonus: JavaScript Function

    Mozilla 有一份詳細的 function 使用說明:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

    簡體版:

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions

    Eloquent JavaScript 是一本非常好的 JavaScript 書,其中的 Function 一章詳細說明了更多用法,包括多重 Function。

    Understanding the this in JavaScript

    JavaScript 中的 this 和傳統 OOP 的有點不同。this 不是永遠指著當前的 object instance,this 是指著當前的 function call 的 context。咩係 context? 即係邊個 call 個 function。例如:

    var obj = {
      hello: function() {
        console.log('hi', this);
      }
    }
    
    obj.hello(); // this 指著 obj
    
    var hello = function() {
      console.log('hi', this);
    }
    
    hello(); // this 指著 undefined (或 window)
    

    更多例子:

    function foo() {
      console.log(this);
    }
    window.foo(); // `this` refers to window.
    
    var objectA = {
      hello: function(){
        console.log(this);
      }
    };
    objectA.hello(); // `this` refers to `objectA`.
    

    更複雜,call function 時係可以指明個 context 做邊個都得:

    var objectA = {
      hello: function(){
        console.log(this);
      }
    };
    objectA.hello.call(window); // ** `this` refers to `window`.
    

    當事件觸發時,我們利用 jQuery 定義的事件會被觸發,觸發 function 的 context,會自動設定成目標 DOM element。所以可以直接用 this 來存取事件的主角—那個 DOM 元素。

    $('#input').keydown(function(){
      console.log(this);  // `this` refers to the `#input`.
    });
    

    又係 MDN 時間。this 的詳情:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

    進階: Object and Prototype

    JavaScript 的物件導向 OOP 就係透過 Function 加 prototype 完成。唔係必須要明白,但想略知一二,可以參考 Eloquent Javascript。