jQuery - YUI3 - AlloyUI Rosetta Stone

www.jsrosettastone.com

Getting Started

jQuery 1.4.2 YUI 3.3.0 AUI 1.0.1 Notes 
$.foo.bar()
 
YUI().use('node', 'module2', 'module3', function (Y) {
  Y.foo.bar()
});
 
AUI().use('node', 'module2', 'module3', function (A) {
  A.foo.bar()
});

The jQuery and $ objects are globals and the jQuery library itself is statically loaded, so they are available immediately.

YUI3 is sandboxed and by default dynamically loaded. The Y object is local to the function you pass as the last argument to YUI().use(). Usually you will put all code that uses YUI3 inside one of these functions. This function executes after all the referenced modules are loaded and accounted for.

The return value of YUI().use() is also a Y object, which you can assign to a global variable [e.g. var Y = YUI().use(…);] and debug with it in a JavaScript console.

The return value of AUI().use() is also an A object, which you can assign to a global variable [e.g. var A = AUI().use(…);] and debug with it in a JavaScript console.

Common Idioms

jQuery 1.4.2 YUI 3.3.0 AUI 1.0.1 Notes 
$('div.foo:first')
 
Y.one('div.foo')
 
A.one('div.foo')

jQuery, YUI3, & AUI use similar selector syntax, but jQuery has added extensions, mainly convenience pseudo-classes, to the Sizzle CSS3-compliant selector engine. YUI3 & AUI comes with three different selector engines; see the section on Selectors. 

var foo = $('div.foo:first');
foo.some_method();

var foo = Y.one('div.foo');

if (foo) {
  foo.some_method();
}

var foo = A.one('div.foo');

if (foo) {
   foo.some_method();
}

Return the first element which matches the selector. :first is a jQuery extension.

If no elements match, Y.one() & A.one() returns null and you should check for it. jQuery selector methods always return a list object with 0 or more elements.

 
$('div.foo')
 
Y.all('div.foo')
 
A.all('div.foo')

Select all div elements with a class of foo.

 
var foo = $('div.foo');

if (foo.length) {
  // do something
}

var foo = Y.all('div.foo');

if (foo.size()) {
  // do something
}

var foo = Y.all('div.foo');

if (foo.size()) {
   // do something
}

If no elements match the selector, Y.all() & A.all()returns an empty NodeList object. jQuery will return an empty list [] that is loaded with special jQ methods. Both are truthy even if they contain no elements, so use NodeList.size() and [].length to check for emptiness.

 
.find('p.foo:first')
.find('p.foo')

.one('p.foo')
.all('p.foo')

.one('p.foo')
.all('p.foo')

Finds P elements with class foo that are children of the given node.

 
$('<div/>')
 
Y.Node.create('<div/>')
 
A.Node.create('<div/>')

Create a new DOM element. Does not add it to the document tree.

 
.html('foo')
.text('foo')
.val('foo')

.setContent('foo')
.set('text', 'foo')
.set('value', 'foo')

.html('foo')
.text('foo')
.val('foo')

.set() is a generic method in YUI for modifying element object properties. Use .setAttr() to modify element attributes.

.setContent(html) is a convenience wrapper around .set('innerHTML', html)

.val(inputValue) is a generic method of AUI for obtaining the value of an input element.

 
.html()
.text()
.val()

.get('innerHTML')
.get('text')
.get('value')

.html()
.text()
.val()

jQuery tends to overload getters and setters in the same method.

 
.attr('foo')
.attr('foo', 'bar')

.getAttr('foo')
.setAttr('foo', 'bar')

.attr('foo')
.attr('foo', 'bar')

Generic HTML attribute getters and setters.

 
.click(fn)
.focus(fn)
.blur(fn)
.mouseout(fn)
.mouseover(fn)

// jQuery 1.4.2 and later allows you to
// register events when creating the element
$('<p/>',{
  text      :'foo', 
  className : 'bar',
  click     : fn,
  focus     : fn,
  blur      : fn
})

.on('click', fn)
.on('focus', fn)
.on('blur', fn)
.on('mouseout', fn)
.on('mouseover', fn)

// Alternatively, YUI allows you to attach multiple
// subscribers with a single call.
.on({
  click    : fn,
  focus    : fn,
  blur     : fn,
  mouseout : fn,
  mouseover: fn
})

// Or attach a single subscriber to multiple events.
.on(['click', 'focus', 'blur', 'mouseout', 'mouseover'], fn)

.on('click', fn)
.on('focus', fn)
.on('blur', fn)
.on('mouseout', fn)
.on('mouseover', fn)

// Alternatively, AUI allows you to attach multiple
// subscribers with a single call.
.on({
  click    : fn,
  focus    : fn,
  blur     : fn,
  mouseout : fn,
  mouseover: fn
})

// Or attach a single subscriber to multiple events.
.on(['click', 'focus', 'blur', 'mouseout', 'mouseover'], fn)

.on() is not chainable by default, but multiple subscribers can be attached in one call using the syntax shown here.

 
parent.append('<div/>')
 
parent.append('<div/>')
 
parent.append('<div/>')

Creates a new div element and makes it a child of parent.

 
child.appendTo(parent)
 
child.appendTo(parent)
 
child.appendTo(parent)

Appends child to parent, and returns child.

.appendTo() was added to YUI in 3.3.0.

 
parent = $('<div/>');
$('<p>foo<p>')
  .click(fn)
  .appendTo(parent);

parent = Y.Node.create('<div/>');
Y.Node.create('<p>foo</p>')
  .appendTo(parent)
  .on('click', fn);

parent = A.Node.create('<div/>');
A.Node.create('<p>foo</p>')
  .appendTo(parent)
  .on('click', fn);
Creates a new div element, then appends a p element with a click event subscription. Note that YUI's on() method is not chainable, so it returns an event handle, not the p node. 
.empty()
 
.empty(true)
 
.empty()

jQuery's .empty() also deregisters any events associated with the elements being destroyed. Passing true to .empty() enables the same behavior in YUI.

.empty() was added to YUI in 3.3.0.

AUI removes the child (and other des) 

.siblings()
.siblings(selector)

.siblings()
.siblings(selector)
.siblings(function)

.siblings()
.siblings(selector)
.siblings(function)

In addition to an optional selector string, YUI3 also supports passing a function to filter the returned siblings.

AUI supports passing a selector for the ancestors to be filtered on. If the reference node has no parent, then it does nothing. 

.show()
.hide()

.show()
.hide()

// If the transition module is loaded, 
// a fade transition will be used when 
// true is passed.
.show(true)
.hide(true)

.show();
.hide();

// If the transition module is loaded, 
// a fade transition will be used when 
// true is passed.
.show(true)
.hide(true)

In YUI, .show() and .hide() can be customized to use transitions supported by the transition module. These methods were added to YUI in 3.3.0.

AUI assume that your node was display/hidden based on the css class 'aui-helper-hidden' used. This won't manipulate the inline style.display property.

 
.before('foo')
.before('function')

.after('foo')
.after('function')

.insertBefore('foo')
.insertAfter('foo')

.placeBefore('foo')
.placeAfter('foo')

Add element before/after parent node as the next sibling.

If the reference node has no parent in AUI, it does nothing.

Selectors

jQuery 1.4.2 YUI 3.3.0 AUI 1.0.1 Notes 
$('*')
 
Y.all('*')
 
A.all('*')

Select all nodes. Note that the default selector engine for YUI3 is CSS 2.1. For all examples in this section, use the selector-css3 module for YUI.

 
$(':animated')
 

      

      
Psuedoclass to select all elements currently being animated. No YUI3 equivalent. 

    

    

      
$(':button')

      
Y.all('input[type=button], button')

      
A.all(':button')

      
        
Extension. In both jQuery and YUI3 you can run multiple selectors separated by commas.

      		
    

    

      
$(':checkbox')

      
Y.all('input[type=checkbox]')

      
A.all(':checkbox')

      
Extension.

    

    

      
$(':checked')

      
Y.all(':checked')

      
A.all(':checked')

      
CSS3

    

    

      
$('parent > child')

      
Y.all('parent > child')

      
A.all('parent > child')

      
Immediate child selector (child must be one level below parent)

    

    

      
$('parent child')

      
Y.all('parent child')

      
A.all('parent child')

      
Descendent selector (child can be at any level below parent)

    

    

      
$('div.class')

      
Y.all('div.class')

      
A.all('div.class')

      
Class selector

    


    

      
$(":contains('foo')")

      
Y.all(':contains(foo)')

      
A.all(':contains(foo)')

      
Extension to select all elements whose text matches 'foo'. jQuery can take quotes or not. YUI3 requires no quotes. The text matching is plain string comparison, not glob or regexp. Be careful with this one as it will return all matching ancestors, eg [html, body, div].

    


    

      

$(':disabled')
$(':enabled')


      

Y.all(':disabled')
Y.all(':enabled')


      		
      

A.all(':disabled')
A.all(':enabled')


      		
      
CSS3. 'input[disabled]' and 'input:not([disabled])' also work in all libraries.

    


    

      
$(':empty')

      
Y.all(':empty')

      
A.all(':empty')

      
CSS3. Selects all elements that have no child nodes (excluding text nodes).

    


    

      
$(':parent')

      
Y.all(':not(:empty)')

      

A.all(':parent')
A.all(':not(:empty)')


      		
      
Inverse of :empty. Will find all elements that are a parent of at least one element. jQuery's version is an extension. YUI's is CSS3.

    


    

      
$('div:eq(n)')

      
Y.all('div').item(n)

      
A.all('div').item(n)

      
Extension. Selects nth element. YUI's item() will return null if there is no nth element. jQuery's selector will return an empty list [] on a match failure.

    


    

      

$('div:even')
$('div:odd')


      		
      

Y.all('div').even()
Y.all('div').odd()


      		
      

A.all('div').even()
A.all('div').odd()


      		
      
Extension. Selects all even or odd elements. Note that elements are 0-indexed and the 0th element is considered even. See also YUI3's NodeList.modulus(n, offset).

    


    

      
$(':file')

      
Y.all('input[type=file]')

      
A.all(':file')

      		
      
Extension. Find input elements whose type=file.

    


    

      
$('div:first-child')

      
Y.all('div:first-child')

      
A.all('div:first-child')

      
CSS3. Selects the first child element of divs.

    


    

      
$('div:first)

      
Y.one('div')

      
A.one('div')

      
The .one() method returns null if there is no match, and a single Node object if there is.

    


    

      

$('div:gt(n)');
$('div:lt(n)');
// or
$('div').slice(n + 1);
$('div').slice(0,n);


      		
      

Y.all('div').slice(n + 1);
Y.all('div').slice(0, n);


      		
      

A.all('div').slice(n + 1);
A.all('div').slice(0, n);


      		
      
Extension. :gt (greater than) selects all elements from index n+1 onwards. :lt (less than) selects all nodes from 0 up to n-1.
    


    

      
$('div:has(p)')

      

var nodes = [];

Y.all('div').each(function (node) {
  if (node.one('p')) {
    nodes.push(node);
  }
});

nodes = Y.all(nodes);


      		
      

var nodes = [];

A.all('div').each(function (node) {
  if (node.one('p')) {
    nodes.push(node);
  }
});

nodes = A.all(nodes);


      		
      
Extension. Selects elements which contain at least one element that matches the specified selector. In this example, all div tags which have a p tag descendent will be selected.

    


    

      
$(':header')

      
Y.all('h1,h2,h3,h4,h5,h6')

      
A.all(':header')

      
Extension. Selects all heading elements. Rarely used.

    


    

      
$('div:hidden')

      

var hidden = [];
Y.all('div').each(function(node) {
  if ((node.get('offsetWidth') === 0 &&
    node.get('offsetHeight') === 0) ||
    node.get('display') === 'none') {
    hidden.push(node);
  }
});
hidden = Y.all(hidden);


      		
      

A.all(':hidden')


      		
      
        
Extension. In jQuery > 1.3.2 :hidden selects all elements (or descendents of elements) which take up no visual space. Elements with display:none or whose offsetWidth/offsetHeight equal 0 are considered hidden. Elements with visibility:hidden are not considered hidden.

        
The YUI3 equivalent would essentially be a port of the jQuery code that implements :hidden. This might be a good candidate for a patch to YUI3.

      		
    


    

      
$('#id')

      
Y.all('#id')

      
A.all('#id')

      
CSS3. Identity selector.

    


    

      
$('input:image')

      
Y.all('input[type=image]')

      
A.all(':image')

      		
      
Extension. Selects all inputs of type image.

    


    

      
$(':input')

      
Y.all('input,textarea,select,button')

      
A.all(':input')

      		
      
Extension. Selects all user-editable form elements.

    


    

      
$(':last-child')

      
Y.all(':last-child')

      
A.all(':last-child')

      
CSS3.

    



    

      
$('div:last')

      

var list = Y.all('div'),
  last;

if (list.size()) {
  last = list.item(list.size() - 1);
}


      		
      

var list = A.all('div'),
  last;

if (list.size()) {
  last = list.item(list.size() - 1);
}


      		
      Extension. Selects the last element matched by the selector.
    


    

      
$('input[type=checkbox][checked]')

      
Y.all('input[type=checkbox][checked]')

      
A.all(':checkbox:checked')

      
CSS3, multiple attribute selector

    


    

      
$(':not(div)')

      
Y.all(':not(div)')

      
A.all(':not(div)')

      
CSS3. Negation selector.

    


    

      
$(':password')

      
Y.all('input[type=password]')

      
A.all(':password')

      		
      
Extension.

    


    

      
$(':radio')

      
Y.all('input[type=radio]')

      
A.all(':radio')

      		
      
Extension.

    


    

      
$(':reset')

      
Y.all('input[type=reset]')

      
A.all(':reset')

      		
      
Extension.

    


    

      
$(':selected')

      
Y.all('option[selected]')

      
A.all(':selected')

      		
      
Extension.

    


    

      
$(':submit')

      
Y.all('input[type=submit]')

      
A.all(':submit')

      		
      
Extension.

    


    

      
$(':text')

      
Y.all('input[type=text]')

      
A.all(':text')

      		
      
Extension. Does not select textarea elements.

    

  




Effects




  
    

      jQuery 1.4.2
      YUI 3.3.0
      AUI 1.0.1
      Notes
    

  

  
    

      

$('#foo').animate(
  {
    width:   100,
    height:  100,
    opacity: 0.5
  },
  {
    duration: 600,
    easing:   'swing'
  }
);


      		
      

var a = new Y.Anim(
  {
    node: '#foo',
    to: {
      width:   100,
      height:  100,
      opacity: 0.5
    },
    duration: 0.6,
    easing:   Y.Easing.bounceOut
  }
);
a.run();


      		
      

var a = new A.Anim(
  {
    node: '#foo',
    to: {
      width:   100,
      height:  100,
      opacity: 0.5
    },
    duration: 0.6,
    easing:   A.Easing.bounceOut
  }
);
a.run();

//or

A=AUI().use('transition');
A.one('#foo').transition({
  width: 100, 
  height: 100,
  opacity: 0.5,
  duration: 0.6
})


      		
      
        
The basic syntax and capabilities of both animation libraries are very similar. jQuery has convenience methods for effects like .fadeIn(), .slideUp(), etc. jQuery core has two easing functions: 'linear' and 'swing', but jQuery UI comes with many more effects as plugins.

        
YUI3 has several easing algorithms built-in, and offers additional tools such as animations over Bezier curves. Make sure to load the 'anim' module in your call to YUI().use().


        
AUI's transition method requires the 'transition' module. 

      		
    


    

      

$('#.foo').fadeOut();

// or

$('#.foo').hide(600);


      

Y.one('#foo').hide(true)


      		
      

A.one('#foo').hide(true)

// or

A=AUI().use('transition');
A.one('#foo').transition({
  opacity: 0,
  duration: 0.6
})


      		
      
        
jQuery's .fadeOut() fades the opacity to 0, then sets display:none on the element. .fadeIn() is naturally the inverse. The YUI equivalents are .hide(true) and .show(true) (note that the transition module must be loaded in order to get the fade effect).


        

          jQuery effects tend to default to 200 or 600ms while YUI's show/hide transitions default to 500ms. YUI durations are in fractions of seconds; jQuery durations are set in milliseconds.


        
AUI's transition method requires the 'transition' module to be loaded. 

      		
    

  




Array vs. NodeList




  
    

      jQuery 1.4.2
      YUI 3.3.0
      AUI 1.0.1
      Notes
    

  

  
    

      
$('.foo').array_method(args)

      
Y.all('.foo').array_method(args)

      
A.all('.foo').array_method(args)

      
Any Array operation that you can perform on a jQuery list can be translated to YUI in this form. YUI NodeList objects are not native Arrays, but do provide wrapper functions for the most common array methods as of 3.3.0.

    


    

      
$('div').slice(x, y)

      
Y.all('div').slice(x, y)

      
A.all('div').slice(x, y)

      
Return the xth to the yth div elements.

    


    

      
$('div').add('p')

      
Y.all('div').concat(Y.all('p'));

      

      
        

        Add nodes that match the specified selector.
        

      		
    


    

      

$('.foo').each(
  function() {
    this.some_method();
  }
);


      		
      

Y.all('.foo').each(
  function() {
    this.some_method();
  }
);


      		
      

A.all('.foo').each(
  function() {
    this.some_method();
  }
);


      		
      
.each() is like the for loop. YUI's each() returns the original NodeList to help with chaining.

    


    

      
$('.foo').filter('.bar')

      
Y.all('.foo').filter('.bar')

      
A.all('.foo').filter('.bar')

      
The .filter() method in both libraries both take CSS selectors as filter criteria. jQuery's .filter() can also take a function.

    


    

      

var fn = function(idx) {
  return this.property === 'value';
};
$('.foo').filter(fn);


      		
      

var filtered = [];
Y.all('.foo').each(
  function(node) {
    if (node.get('property') === 'value') {
      filtered.push(node);
    }
  }
);
filtered = Y.all(filtered);


      		
      

var filtered = [];
A.all('.foo').each(
  function(node) {
    if (node.get('property') === 'value') {
      filtered.push(node);
    }
  }
);
filtered = A.all(filtered);

// or

A=AUI().use('array-extras');
var n = A.all('foo');

var filtered = A.Array.filter(n.getDOM(), function(item, index, collection){
  return item.get('property') == 'value');
});
A.all(filtered);


      		
      
        
Classic functional programming filter function. Given a list of elements, run the function on each and return a list of those which evaluated true. NodeList.filter(fn) is coming to a future point release of YUI3.

        
AUI filtered method requires the AUI 'array-extras' module

      		
    


    

      

$('.foo').map(
  function(idx, el) {
    some_function(el);
  }
).get();



      

var mapped = [];
Y.all('.foo').each(
  function(node) {
    mapped.push(
      some_function(node)
    );
  }
);
mapped = Y.all(mapped);


      		
      

var mapped = [];
A.all('.foo').each(
  function(node) {
    mapped.push(
      some_function(node)
    );
  }
);
mapped = A.all(mapped);    

// or

A=AUI().use('array-extras');
var n = A.all('foo');

var map = A.Array.map(n.getDOM(), function(item, index, collection){
  return some_function(item);
});
A.all(map);


      		
      
        
jQuery's .map() returns a jQuery-wrapped array of the return values of calls to the given function. get() returns a true array. NodeList.map(fn) is coming to a future point release of YUI3.

        
AUI map method requires the AUI 'array-extras' module

      		
    

  




Ajax




  
    

      jQuery 1.4.2
      YUI 3.3.0
      AUI 1.0.1
      Notes
    

  

  
    

      

$.ajax({
  url:      url,
  data:     data,
  success:  successFn
});


      		
      

Y.io(url, {
  data: data,
  on:   {success: successFn}
});


      		
      

A.io.request(url, {
  method: method,
  dataType: data,
  on: {success: successFn}
});


      		
      
        
YUI.io & AUI have extra options for failure mode callbacks, headers, cross-frame i/o, etc. jQuery.ajax() has some interesting options for async, context, and filtering. Make sure to load the YUI 'io' module.

        
AUI 'aui-io' module.

      		
    


    

      

      

Y.io(url, {
  data: data,
  on:   {success: successFn},
  xdr:  {use: 'flash'}
});


      		
      

A.io.request(url, {
  method: method,
  data: data,
  on:   {success: successFn},
  xdr:  {use: 'flash'}
})


      		
      
        
Cross-domain requests via a Flash helper. No jQuery equivalent.

        
AUI 'aui-io' module.

      		
    


    

      
$('#message').load('url');

      

Y.one('#message').load('url');
Y.one('#message').load('url', '#foo');


      		
      

A.one('#message').load('url');
A.one('#message').load('url', '#foo');	
	
// or	
A.one('#message').plug(A.Plugin.IO, { 
  uri: 'url', 
  method: 'method' 
});


      		
      
        
Load the content of a given URL and replace the contents of #message with it.


        
In YUI, the node-load module provides this functionality. YUI also optionally supports extracting only a portion of the loaded content if a selector string is passed as the second argument (assuming the content is HTML).


        
AUI 'aui-io' module.

      		
    

  




CSS




  
    

      jQuery 1.4.2
      YUI 3.3.0
      AUI 1.0.1
      Notes
    

  

  
    

      

.addClass('foo')
.removeClass('foo')
.toggleClass('foo')
.hasClass('foo')


      		
      

.addClass('foo')
.removeClass('foo')
.toggleClass('foo')
.hasClass('foo')


      		
      

.addClass('foo')
.removeClass('foo')
.toggleClass('foo')
.hasClass('foo')


      		
      
CSS class name manipulation.

    


    

      
.removeClass('foo').addClass('bar')

      
.replaceClass('foo', 'bar')

      
.replaceClass('foo', 'bar')

      
Replace node's CSS class 'foo' with 'bar'.

    


    

      
.css('display', 'block')

      
.setStyle('display', 'block')

      
.setStyle('display', 'block')

      
Set a single CSS property

    


    

      

.css({
  height:  100,
  width:   100,
  display: 'block'
})


      		
      

.setStyles({
  height:  100,
  width:   100,
  display: 'block'
})

      		
      

.setStyles({
  height:  100,
  width:   100,
  display: 'block'
})

      		
      
Set multiple CSS properties with a dictionary.

    

    

      
.css('display')

      
.getStyle('display')

      
.getStyle('display')

      
Get the current value for a CSS property.

    

    

      

.height()
.width()


      		
      
???

      
get('offsetWidth') - getPadding('lr') - getBorderWidth('lr')

      
        
Computed height / width. Excludes padding and borders.

        
AUI getBorderWidth has values of t(top), l(left), r(right), b(bottom)

      		
    


    

      

.innerHeight()
.innerWidth()


      		
      
???

      
get('offsetWidth') - getBorderWidth('lr')

      
        
Includes padding but not border

        
AUI getBorderWidth has values of t(top), l(left), r(right), b(bottom)

      		
    


    

      

.outerHeight()
.outerWidth()


      		
      

.get('offsetHeight')
.get('offsetWidth')


      		
      

.get('offsetHeight')
.get('offsetWidth')


      		
      
Includes padding and border

    


    

      

.position()
// {left: 123, top: 456}


      		
      

.getXY()
// [123, 456]


      		
      

.getXY()
// [123, 456]


      		
      
        
Get the computed x,y coordinates.


        
In jQuery, the coordinates are relative to the nearest ancestor element that is relatively or absolutely positioned. In YUI, they're relative to the document.

      		
    

  







Credits




  The jQuery - YUI3 Rosetta Stone was originally created by
  Carlos Bueno. It's now maintained by
  the YUI team and
  Paul Irish.





  www.jsrosettastone.com





  
How to Contribute

  

    Please
    file
    bugs and recommend changes on GitHub. You're also more than welcome to
    fork the GitHub
    repo and send pull requests.