mootools完成特效
I've been dabbling with Dojo quite a bit lately. I feel great about my MooTools and jQuery skills but I'm a bit still raw when it comes to Dojo. What's important that I keep in mind, however, is that the tasks I'm trying to accomplish are the same -- the syntax is simply different. Here are a few basic JavaScript tasks and the syntax to accomplish them within each awesome framework.
最近我一直在和Dojo擦肩而过。 我对自己的MooTools和jQuery技能感到很满意，但是对于Dojo还是有点陌生。 但是，我要记住的重要一点是，我要完成的任务是相同的-语法完全不同。 以下是一些基本JavaScript任务以及在每个很棒的框架内完成这些任务的语法。
DOM准备就绪时执行代码 (Execute Code when the DOM is Ready)
Dojo工具包 (Dojo Toolkit)
dojo.ready(function() {
//do stuff
});
jQuery的 (jQuery)
jQuery(document).ready(function() {
//do stuff
});
Moo工具 (MooTools)
window.addEvent('domready',function() {
//do stuff
});
收集元素 (Collect Elements)
Dojo工具包 (Dojo Toolkit)
var myElement = dojo.byId('myElement');
var divs = dojo.query('div');
jQuery的 (jQuery)
var myElement = jQuery('#myElement');
var divs = jQuery('div');
Moo工具 (MooTools)
var myElement = document.id('myElement');
var divs = $$('div');
创建事件监听器 (Create Event Listeners)
Dojo工具包 (Dojo Toolkit)
dojo.connect(dojo.byId('myElement'),'onclick',function() {
alert('You clicked me!');
});
jQuery的 (jQuery)
jQuery('#myElement').click(function() {
alert('You clicked me!');
});
Moo工具 (MooTools)
document.id('myElement').addEvent('click',function() {
alert('You clicked me!');
});
创建一个新元素，注入Document.Body (Create a New Element, Inject Into Document.Body)
Dojo工具包 (Dojo Toolkit)
dojo.create('div',{
innerHTML: 'This is a new element',
id: 'myElement'
},dojo.body());
jQuery的 (jQuery)
jQuery('<div id="myElement">This is a new element</div>').appendTo('body');
Moo工具 (MooTools)
new Element('div',{
id: 'myElement',
text: 'This is a new element'
}).inject(document.body);
执行AJAX请求 (Execute AJAX Requests)
Dojo工具包 (Dojo Toolkit)
dojo.xhrPost({
url: 'save.php',
content: {
id: dojo.byId('user-id').value
}
load: function(response) {
alert('Received the following response: ' + response);
}
});
jQuery的 (jQuery)
jQuery.ajax({
url: 'save.php',
type: 'post',
data: {
id: jQuery('#user-id').val()
},
success: function(response) {
alert('Received the following response: ' + response);
}
});
Moo工具 (MooTools)
new Request({
url: 'save.php',
method: 'post',
data: {
id: document.id('user-id').value
},
onSuccess: function(response) {
alert('Received the following response: ' + response);
}
}).send();
动画元素的不透明度 (Animate the Opacity of an Element)
Dojo工具包 (Dojo Toolkit)
dojo.anim('myElement',{ opacity: 0.7 }, 250);
jQuery的 (jQuery)
jQuery('#myElement').fadeTo(250,0.7);
//duration first...ftl
Moo工具 (MooTools)
document.id('myElement').set('tween',{ duration: 250 }).fade(0.7);
See? Dojo, jQuery, and MooTools aren't that different. Same problems, different solution syntax. Like Pete Higgins says: It's just JavaScript!
看到？ Dojo，jQuery和MooTools没什么不同。 同样的问题，不同的解决方案语法。 就像Pete Higgins所说：只是JavaScript！
翻译自: https://davidwalsh.name/mootools-jquery-dojo
mootools完成特效
相关资源：Dojo vs jQuery 比较
