jQuery - YUI 3 Rosetta Stone

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

$('div.foo:first')

Y.one('div.foo')

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

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

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

$('div.foo')

Y.all('div.foo')

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

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

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

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

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

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

$('<div/>')

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

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

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

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

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

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

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

$.trim(' foo ')

Y.Lang.trim(' foo ')

parent.append('<div/>')

parent.append('<div/>')

child.appendTo(parent)

child.appendTo(parent)

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

.replaceWith(content);

.insert(content, 'replace');

.before(content);

.insert(content, 'before');

.after(content);

.insert(content, 'after');

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

.empty()

.empty()

.siblings()
.siblings(selector)

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

.next()
.next(selector)

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

.prev()
.prev(selector)

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

.parent()

.get('parentNode')

.children()

.get('children')

.closest(selector)

.ancestor(selector)
.ancestor(fn)

$.contains(node, descendant)

.contains(descendant)

.show()
.hide()

.show()
.hide()

.fadeIn()
.fadeOut()

.show(true)
.hide(true)

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

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

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

$.proxy(fn, context)

Y.bind(fn, context)

.data(key)
.data(key, value)

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

.removeData()
.removeData(key)

.clearData()
.clearData(key)

$('#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)

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

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

$(document).on('click', '#target', fn);

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

$('#foo').trigger('click');

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

$('*')

Y.all('*')

$(':animated')

$(':button')

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

$(':checkbox')

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

$(':checked')

Y.all(':checked')

$('parent > child')

Y.all('parent > child')

$('parent child')

Y.all('parent child')

$('div.class')

Y.all('div.class')

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

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

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

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

$(':empty')

Y.all(':empty')

$(':parent')

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

$('div:eq(n)')

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

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

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

$(':file')

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

$('div:first-child')

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

$('div:first)

Y.one('div')

$('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);

$('div:has(p)')

var nodes = [];

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

nodes = Y.all(nodes);

$(':header')

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

$('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);

$('#id')

Y.all('#id')

$('input:image')

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

$(':input')

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

$(':last-child')

Y.all(':last-child')

$('div:last')

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

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

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

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

$(':not(div)')

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

$(':password')

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

$(':radio')

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

$(':reset')

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

$(':selected')

Y.all('option[selected]')

$(':submit')

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

$(':text')

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

.is(selector)

.test(selector)

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

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

// Or

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$('.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);

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

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

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

$('#message').load('/ajax/test.html');

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

$.getJSON(url, successFn);

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

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

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

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

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

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

.replaceClass('foo', 'bar')

.css('display', 'block')

.setStyle('display', 'block')

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

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

.css('display')

.getStyle('display')

.height()
.width()

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

.innerHeight()
.innerWidth()

.get('clientHeight')
.get('clientWidth')

.outerHeight()
.outerWidth()

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

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

.getXY()
// [123, 456]

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

.setXY(123, 456)

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

$.inArray(value, array)

Y.Array.indexOf(array, value)

$.type(obj)

Y.Lang.type(obj)

$.isPlainObject(obj)

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

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

$.isEmptyObject(obj)

Y.Object.isEmpty(obj)

$.makeArray(obj)

Y.Array(obj)

$.now()

Y.Lang.now()