丟棄prototype,開始mootools吧

以下的代碼均轉自:http://www.chromasynthetic.com/blog/how-well-do-you-know-mootools/114/,也算是一個mootools v1.11 的入門小記吧!

 

第一:

document.getElementById('foo');

 

>$('foo');

 

第二:

var woot = $('bar').value;

 

>var woot = $('bar').getValue();

 

第三:

$('footer').style.height = '100px';

$('footer').style.background = '#ffc';

 

>$('footer').setStyles({

  height: '100px',

  background: '#ffc'

  });

 

第四:

$('coolestWidgetEver').innerHTML = 'some nifty content';

 

>$('coolestWidgetEver').setHTML('some nifty content');    

//1.2這個更出色:$('coolestWidgetEver').set('html','some nifty content');

 

第五:

new Ajax('ninja.php?weapon1=foo&weapon2=bar');

 

>new Ajax('ninja.php', {

  data: {

    weapon1: 'foo',

    weapon2: 'bar'

  }

  });

 

第六:

new Ajax('blah.php', {

  method: 'post',

  async: true,

  encoding: 'UTF-8',

  headers: {'contentType': 'application/x-www-form-urlencoded'}

});

 

>new Ajax('blah.php');

 

第七:

$('myContainer').onclick = doSomeMagic;

 

>$('myContainer').addEvent('click', doSomeMagic);

 

第八:

$$('div.hidden').each(function(el){

  el.removeClass('hidden');

})

 

>$$('div.hidden').removeClass('hidden');

 

第九:

$$('div.collapsed').each(function(el){

  el.addEvent('click', expand);

});

 

>$$('div.collapsed').addEvent('click', expand);

 

第十:

$$('input.date').addEvent('focus', onFocus);

$$('input.date').addEvent('blur', onBlur);

 

>$$('input.date').addEvents({

  'focus': onFocus,

  'blur': onBlur

   });

 

第十一:

$('productTable').innerHTML = 

  $('productTable').innerHTML + 

  '<tr><td>' + productId + ' '

  + productName + '</td></tr><tr><td>' 

  + productId + ' ' + productPrice + 

  '</td></tr>';

 

>var template = '<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>';

$('productTable').injectHTML(template.interpolate({

  id: productId,

  name: productName,

  price: productPrice 

  }));

 

另外給大家推薦一個對mootools功能擴充的網站:http://www.clientcide.com/js,mootools我認為更比色的是可以根據自已的需求拼裝它.而prototype在這方面對剛入門的兄弟來說有點累了！不得不為了少許功能載入一個胖大的prototype.

 

下面是來自:http://www.clientcide.com/js的一個ajax request queue的樣本:

1.

普通的mootools v1.2的ajax request

            var comment=new Request.HTML({

                     url:'/dynamicquery.asp',

                     method:'get',

                     data:{tag:1},

                     update:$('commentn')

            });             

            var resume=new Request.HTML({

                     url:'/dynamicquery.asp',

                     method:'get',

                     data:{tag:4},

                     update:$('resumen')

            });

2.一個擴充自Request的Queue類

            var dynamicQueue=new Request.Queue();            

            dynamicQueue.addRequests({

                     'comment':comment,

                     'resume':resume                     

            });          

3.發送

            comment.send();

            resume.send();