jQuery - YUI 3 Rosetta Stone

www.jsrosettastone.com

Getting Started

jQuery 1.8.3 YUI 3.8.0
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://somedomain.com/path/to/plugin.js"></script>
<script src="https://somedomain.com/path/to/anotherplugin.js"></script>

<script>
  $(document).ready(function() {
    // Do stuff with the $ object here
    $.foo.bar()
  });
</script>

Loading Method: Statically loaded (by default).

Scope: The jQuery/$ objects are global.

Plugins: To go beyond base library functionality, jQuery has the concept of "plugins" which are loaded in via additional <script> tags, or a dynamic loader. All examples on this page use core library methods (no plugins).

<script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>



<script>
  YUI().use('module1', 'module2', 'module3', function (Y) {
    // Do stuff with the Y object here
    Y.foo.bar()
  });
</script>

Loading Method: Dynamically loaded (by default).

Scope: The YUI loader object is global, and the Y object is local to each "sandbox" (your callback function). However, the return value of YUI().use() is a Y object, which you can assign to a global variable [e.g. var Y = YUI().use(…);].

Modules: Functionality in the YUI library is provided by "modules", which are split between core (officially supported) and gallery (user contributed). Simply adding YUI().use(function(Y){}); doesn't get you much, so you will need to specify which modules you wish to use and the loader will fetch them for you. The following core modules should provide you all the functionality for the examples in this document:

  YUI().use('node', 'io', 'event', 'animation', function (Y) {
    // example code here
  });

If any additional modules are needed, they'll be specified in the "notes" section to the example.

Common Idioms

jQuery 1.8.3 YUI 3.8.0 Notes
$('div.foo:first')
Y.one('div.foo')

jQuery and YUI use similar selector syntax, but jQuery has added extensions, mainly convenience pseudo-classes, to the Sizzle CSS3-compliant selector engine. YUI 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();
}

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

If no elements match, Y.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')

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
}

If no elements match the selector, Y.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')

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

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

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

.html('foo')
.text('foo')
.val('foo')
.setHTML('foo')
.set('text', 'foo')
.set('value', 'foo')

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

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

.html()
.text()
.val()
.getHTML()
.get('text')
.get('value')

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

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

Generic HTML attribute getters and setters.

$.trim(' foo ')
Y.Lang.trim(' foo ')

Strips leading and trailing whitespace.

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

Creates a new div element and makes it a child of 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);
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.
// Removes #foo from its parent and
// detaches events and jQuery data.
$('#foo').remove()

// Removes #foo from #container.
$('#container').remove('#foo')
// Removes #foo from its parent, but doesn't
// detach events or YUI plugins.
Y.one('#foo').remove()

// Removes #foo and detaches events and plugins.
Y.one('#foo').remove(true)

// Removes #foo from #container.
Y.one('#container').removeChild(Y.one('#foo'))

jQuery's .remove() purges events and jQuery data from the removed node. For the equivalent behavior in YUI, use .remove(true).

.empty()
.empty()

Removes and destroys all of the nodes within the given node and also deregisters any events associated with the elements being destroyed.

.empty() was added to YUI in 3.3.0.

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

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

.next()
.next(selector)
.next()
.next(selector)
.next(fn)

Same considerations as .siblings().

.prev()
.prev(selector)
.previous()
.previous(selector)
.previous(fn)

Same considerations as .siblings().

.parent()
.get('parentNode')

Returns the parent node of the given node.

.children()
.get('children')

Returns all the element children of the given node.

.closest(selector)
.ancestor(selector)
.ancestor(fn)

Returns the first ancestor that matches the given selector. In addition, YUI supports using a function instead of a selector to find an ancestor.

$.contains(node, descendant)
.contains(descendant)

Check to see if a node contains a certain descendant.

.show()
.hide()
.show()
.hide()
Make DOM nodes appear/disappear
.fadeIn()
.fadeOut()
.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.

$.parseJSON( '{"name":"Douglas"}' )
Y.JSON.parse( '{"name":"Douglas"}' )

Converts a JSON string into an object. Requires the json-parse module.


      
Y.JSON.stringify({name: "Douglas"})

Converts an object to a JSON string. Requires the json-stringify module. No jQuery equivalent.

$.proxy(fn, context)
Y.bind(fn, context)

Creates a new function that will call the supplied function in a particular context.

.data(key)
.data(key, value)
.getData(key)
.setData(key, value)

Stores data associated with a DOM element without modifying the DOM.

.removeData()
.removeData(key)
.clearData()
.clearData(key)

Removes the associated data.

Events

jQuery 1.8.3 YUI 3.8.0 Notes
$('#foo').click(fn)
$('#foo').focus(fn)
$('#foo').blur(fn)
$('#foo').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
})

//Alternatively, you can use the bind() method
$('#foo').bind('click', fn);
Y.one('#foo').on('click', fn)
Y.one('#foo').on('focus', fn)
Y.one('#foo').on('blur', fn)
Y.one('#foo').on('mouseout', fn)
Y.one('#foo').on('mouseover', fn)

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

// Or attach a single subscriber to multiple events.
Y.one("#foo").on(['click', 'focus', 'blur'], fn)

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

$('#container').delegate('#target', 'click', fn);
Y.one('#container').delegate('click', fn, '#target');

Event listener will bind to #container and only fire the callback fn when a event's target is #target (or any other selector)

$(document).on('click', '#target', fn);
Y.one(Y.config.doc).delegate('click', fn, '#target');

jQuery's delegate() is generally preferred over bind() because of performance as well as chaining limitations (source).

.live() was deprecated in jQuery 1.7, and removed in jQuery 1.9 in favour of .on(). As of jQuery 1.7, .on() is the actual method that bind(), live(), and delegate() passes through. (source)

$('#foo').trigger('click');
Y.one('#foo').simulate('click');

Simulates a click event. In YUI, you'll need the node-event-simulate module.

Selectors

jQuery 1.8.3 YUI 3.8.0 Notes
$('*')
Y.all('*')

Select all nodes. Note that the default selector engine for YUI 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 YUI equivalent.

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

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

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

Extension.

$(':checked')
Y.all(':checked')

CSS3

$('parent > child')
Y.all('parent > child')

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

$('parent child')
Y.all('parent child')

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

$('div.class')
Y.all('div.class')

Class selector

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

Extension to select all elements whose text matches 'foo'. jQuery can take quotes or not. YUI 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')

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

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

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

$(':parent')
Y.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)

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()

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

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

Extension. Find input elements whose type=file.

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

CSS3. Selects the first child element of divs.

$('div:first)
Y.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);

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);

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')

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);

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 YUI equivalent would essentially be a port of the jQuery code that implements :hidden. This might be a good candidate for a patch to YUI.

$('#id')
Y.all('#id')

CSS3. Identity selector.

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

Extension. Selects all inputs of type image.

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

Extension. Selects all user-editable form elements.

$(':last-child')
Y.all(':last-child')

CSS3.

$('div:last')
var list = Y.all('div'),
    len  = list.size(),
    last;

if (len) {
  last = list.item(len - 1);
}
Extension. Selects the last element matched by the selector.
$('input[type=checkbox][checked]')
Y.all('input[type=checkbox][checked]')

CSS3, multiple attribute selector

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

CSS3. Negation selector.

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

Extension.

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

Extension.

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

Extension.

$(':selected')
Y.all('option[selected]')

Extension.

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

Extension.

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

Extension. Does not select textarea elements.

.is(selector)
.test(selector)

Checks elements against a selector and returns a boolean indicating whether or not it matches.

Effects

jQuery 1.8.3 YUI 3.8.0 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();

// Or use transition

Y.one('#foo').transition(
  {
    width:   100,
    height:  100,
    opacity: 0.5
    duration: 0.6,
    easing: 'ease-out'
  }
);

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.

YUI has several easing algorithms built-in, and offers additional tools such as animations over Bezier curves. Requires the anim module.

You can also use YUI's transition module for simple transitions.

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

// Or

$('#.foo').hide(600);
Y.one('#foo').hide(true)

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.

Array vs. NodeList

jQuery 1.8.3 YUI 3.8.0 Notes
$('.foo').array_method(args)
Y.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)

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();
  }
);

.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')

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

$('.foo').filter(function (idx) {
  return this.property === 'value';
});
Y.all('.foo').filter(function (node) {
  return node.get('property') === 'value';
});

Classic functional programming filter function. Given a list of elements, run the function on each and return a list of those which evaluated true.

$('.foo').map(
  function(idx, el) {
    return some_function(el);
  }
)
var mapped = [];
Y.all('.foo').each(
  function (node) {
    mapped.push(some_function(node));
  }
);
mapped = Y.all(mapped);

jQuery's .map() returns a jQuery-wrapped array of the return values of calls to the given function.

Ajax

jQuery 1.8.3 YUI 3.8.0 Notes
$.ajax({
  url:      url,
  data:     data,
  success:  successFn
});
Y.io(url, {
    data: data,
    on:   {success: successFn}
});

YUI.io has 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.

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

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

$('#message').load('/ajax/test.html');
Y.one('#message').load('/ajax/test.html');
Y.one('#message').load('/ajax/test.html', '#foo');

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).

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

A remote request for a JSON file. Same-origin policy is enforced.

There is no convenience method for this in YUI.

$.getJSON(
  "/some/jsonpURL.json?callback=?",
  successFn
);
Y.jsonp(
  "/some/jsonpURL.json?callback={callback}",
  successFn
);

JSONP requests. Same-origin policy is not enforced. Requires the jsonp module.

CSS

jQuery 1.8.3 YUI 3.8.0 Notes
.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')

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

.css('display', 'block')
.setStyle('display', 'block')

Set a single CSS property

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

Set multiple CSS properties with a dictionary.

.css('display')
.getStyle('display')

Get the current value for a CSS property.

.height()
.width()
.getComputedStyle('height')
.getComputedStyle('width')

Computed height / width. Excludes padding and borders.

.innerHeight()
.innerWidth()
.get('clientHeight')
.get('clientWidth')

Includes padding but not border

.outerHeight()
.outerWidth()
.get('offsetHeight')
.get('offsetWidth')

Includes padding and border

.offset()
// {left: 123, top: 456, width: 789, height: 1011}
.getXY()
// [123, 456]

Get the computed x,y coordinates relative to the document. jQuery also returns the size of the node

.offset({ left: 123, top: 456 })
.setXY(123, 456)

Set the x,y coordinates relative to the document.

Language Utilities

jQuery 1.4.3 YUI 3.8.0 Notes
$.each([1, 2, 3], fn(index, value))
$.each({ key: value }, fn(key, value))
Y.Array.each([1, 2, 3], fn(value, index))
Y.Object.each({ key: value }, fn(value, key))

Iterate through an array or object. YUI is compatible with the Array forEach method so the first parameter the callback receives when iterating through an array is the value. In jQuery, the first parameter is the index of the value in the array.

$.inArray(value, array)
Y.Array.indexOf(array, value)

Returns the index of the searched value in the specified array.

$.type(obj)
Y.Lang.type(obj)

Returns a string representing the type of the specified object. YUI and jQuery results are compatible (see jQuery's).

$.isPlainObject(obj)
Y.Lang.isObject(obj)
Y.Lang.isObject(obj, true)

In YUI, Y.Lang.isObject returns true for arrays and functions. Passing true as a second parameter makes it return false if the input is a function.

$.isArray(obj)
$.isFunction(obj)
Y.Lang.isArray(obj)
Y.Lang.isFunction(obj)
Y.Lang.isString(obj)
Y.Lang.isBoolean(obj)
Y.Lang.isDate(obj)
Y.Lang.isNumber(obj)
Y.Lang.isNull(obj)
Y.Lang.isUndefined(obj)
Y.Lang.isValue(obj)

YUI also has some extra type checking functions. In particular, Y.Lang.isValue() returns false if the object is null, undefined or not a number, and true in any other case.

$.isEmptyObject(obj)
Y.Object.isEmpty(obj)

Check if the given object doesn't have any properties.

$.makeArray(obj)
Y.Array(obj)

Make an array-like object, for instance the return value of document.getElementsByTagName, into a true array.

$.now()
Y.Lang.now()

Return the current time in milliseconds.

Credits

The jQuery - YUI 3 Rosetta Stone was originally created by Carlos Bueno. It's now maintained by Ryan Grove 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.