丢弃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();