Comparing Syntax of MooTools 1.1 with MooTools 1.2 and jQuery 1.4
boz — Fri, 03/12/2010 - 12:59
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() |
I realize this isn't a new
Anonymous — Thu, 06/02/2011 - 00:06