Comparing Syntax of MooTools 1.1 with MooTools 1.2 and jQuery 1.4

This is not a comprehensive comparison, but is a comparison of the functions that I used the most. Readers should note that while syntax appears similar, the philosophies of MooTools and jQuery are very different resulting in a fundamental differences in their implementation. This data is intended for those that are analyzing cost in switching frameworks and is not intended for someone trying to determine which framework to use.

Mootools 1.12

Mootools 1.2.4

jQuery 1.4.2

Browser Detection    
window.ie6 Browser.Engine.trident4 jQuery.browser
     
Element    
el.setHTML(string|array) el.set('html', string|array) e.html('html')
el.getText() el.get('text') el.text()
el.setText(string) el.set('text', string) el.text('text')
el.setStyle(style,value) el.setStyle(style,value) el.css(style,value)
el.setStyles(object) el.setStyles(object) el.css(object)
el.addClass(classname) el.addClass(classname) el.addClass(classname)
el.removeClass(classname) el.removeClass(classname) el.removeClass(classname)
el.remove() el.dispose() e.remove()
el.replaceWith(element) element.replaces(el) el.replaceWith(el)
new Fx(el,obj) new Fx.Morph(el, obj) el.animate()
new Element(type,params) new Element(type,params) el.append(html)/el.appendTo(html)
$('selector') $('selector') $('#selector')
$$('.classname') $$('.classname') $('.classname')
$E(selector) $$('selector').getFirst() $(selector).first()
$ES(selector) $$('selector') $(selector)
el.getSize().size.x/ el.getSize().size.y el.getSize().x/ el.getSize().y el.height() / el.width()
el.getValue() el.get('value') el.val()
el.setProperty(attribute,value) el.setProperty(attribute,value) el.attr(attribute,value)
el.getProperty(attribute) el.getProperty(attribute) el.attr(attribute)
el.injectInside(el)   el.appendTo(el)
el.injectAfter(el)   el.insertAfter(el)
el.getParent() el.getParent() el.parent()
el.getChildren() el.getChildren() el.children()
el.getNext() el.getNext() el.next()
el.getPrevious() el.getPrevious() el.prev()
el.getLast() el.getLast() el.first() / $(selector:first-child)
el.getFirst() el.getFirst() el.last() / $(selector:last-child)
     
Event    
window.addEvent("domready",fn) window.addEvent("domready",fn) $(document).ready(fn)
el.addEvent("click",fn) el.addEvent("click",fn) el.click()
el.addEvent("focus",fn) el.addEvent("focus",fn) el.focus()
el.addEvent("blur",fn) el.addEvent("blur",fn) el.blur()
el.addEvent("mouseenter",fn) el.addEvent("mouseenter",fn) el.mouseenter()
el.addEvent("mouseleave",fn) el.addEvent("mouseleave",fn) el.mouseleave()
el.addEvent("unload",fn) el.addEvent("unload",fn) el.unload()
el.addEvent("submit",fn) el.addEvent("submit",fn) el.submit()
el.removeEvent(event) el.removeEvent(event) el.unbind(event)
event.stop() event.stop() event.stopPropagation()
event.preventDefault() event.preventDefault() event.preventDefault()
     
Array    
[].merge([]) 3. [].combine([]) jQuery.merge([],[])
     
Ajax    
new Ajax new Request jQuery.ajax()
comments powered by Disqus

© Balanced Scale Media, LLC. All right reserved.