2015/07/04

Webduino 改寫用 jquery


今天參加了Webduino的開發教學 圖片來自<官網>
因為範例都是原生的javascript,上課時一直Try不出來怎麼改用jQuery
晚上研究了一下改寫成功

以官網範例  https://webduino.io/tutorials/tutorial-01-led.html

window.addEventListener('WebComponentsReady', function () {
 var board = document.getElementById('board'),
 light = document.getElementById('light');

 board.on('ready',function ready() {
  var led = document.getElementById('led');

  light.addEventListener('click', function() {
   if(light.className == 'on'){
    led.off();
    light.className = 'off';
   }else{
    led.on();
    light.className = 'on';
   }
  }, false);
 });

}, false);

使用jQuery改寫

$(document).bind('WebComponentsReady', function(){
 $light = $("#light");

 $("#board")[0].on('ready',function ready() {
  var led = $("#led")[0];
  $light.click(function(){
   if( $light.hasClass('on') ){
    led.off();
    $light.attr('class', 'off');
   }else{
    led.on();
    $light.attr('class', 'on');
   }
  });
 });
}, false);

  • addEventListener 可用 bind 替換,我習慣綁在Document
  • 使用WebComponents時,需要的是HTML DOM,所以加上 [0] 已取得 (不加表示取得jQuery Object)