从jQuery[1.4.2] 迁移到 YUI3[3.1.2]

Getting Started

$.foo.bar() <==> YUI().use('node', 'module2', 'module3', function (Y) { Y.foo.bar()})

Common Idioms

$('div.foo:first') <==> Y.one('div.foo')

$('div').parent() <==> Y.one('div').get('parent')

$('#tabname')[0] <==>Y.Node.getDOMNode(Y.one("#tabname"));  转换Dom对象

var foo = $('div.foo:first')  <==>  var foo = Y.one('div.foo')

foo.some_method()  <==> if (foo) { foo.some_method();}
$('div.foo') <==> Y.all('div.foo')

var foo = $('div.foo') <==> var foo = Y.all('div.foo');
foo.length <==> foo.size()

.find('p.foo:first') <==> .one('p.foo')

.find('p.foo') <==> .all('p.foo')

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

.html('foo') <==> .setContent('foo')
.text('foo') <==> .set('text', 'foo')
.val('foo') <==> .set('value', 'foo')
.html() <==> .get('innerHTML')
.text() <==> .get('text')

.val() <==> .get('value')
.attr('foo') <==> .get('foo')
.attr('foo', 'bar') <==> .set('foo', 'bar')
.click(fn) <==> .on('click', fn)
.focus(fn) <==> .on('focus', fn)

.blur(fn) <==> .on('blur', fn)

.mouseout(fn) <==> .on('mouseout', fn)
.mouseover(fn) <==> .on('mouseover', fn)
parent.append('<div/>') <==> parent.append('<div/>')

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

$('<p>foo<p>').click(fn).appendTo(parent) <==> child = Y.Node.create('<p>foo</p>');child.on('click', fn);parent.appendChild(child);
child.appendTo(parent) <==> parent.append(child);parent.appendChild(child)
.empty() <==> .get('children').remove(true);

.siblings() <==> .siblings()
.siblings(selector) <==> .siblings(selector);.siblings(function)
.show() <==> .setStyle('display', null)
.hide() <==> .setStyle('display', 'none')
Selectors

$('*') <==> Y.all('*')

$(':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') <==> Y.all(':disabled')
$(':enabled') <==> Y.all(':enabled')
$(':empty') <==> Y.all(':empty')

$(':parent') <==> Y.all(':not(:empty)')

$('div:eq(n)') <==> Y.all('div').item(n)

$('div:even') <==> Y.all('div').even()
$('div:odd') <==> 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)') <==> Y.all(Y.all('div')._nodes.slice(n + 1));
$('div:lt(n)') <==> Y.all(Y.all('div')._nodes.slice(0,n));
$('#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'), last;if (list.size()) {  last = list.item(list.size() - 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]')

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

Array vs. NodeList

$('.foo').array_method(args) <==> Y.all(Y.all('.foo')._nodes.array_method(args))

$('div').slice(x, y) <==> Y.all(Y.all('div')._nodes.slice(x, y))

$('div').add('p') <==> Y.all(Y.all('div')._nodes.concat(Y.all('p')._nodes))

 

Ajax 

//jquery
$.ajax({
  url:      url,
  data:     data,
  success:  successFn
});
//yui3
Y.io(url, {
    data: data,
    on:   {success: successFn}
});
Y.io(url, {
    data: data,
    on:   {success: successFn},
    xdr:  {use: 'flash'}
});

/************************/
//jquery
$('#message').load('/ajax/test.html');
//yui3
var fn = function(txnid, o) {
    Y.one('#message').setContent(
        o.responseText
    );
}
Y.io('/ajax/test.html', {
    on: { success: fn }
});

css

.addClass('foo') <==> .addClass('foo')

.removeClass('foo') <==> .removeClass('foo')
.toggleClass('foo') <==> .toggleClass('foo')
.hasClass('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')

.outerHeight() <==> .get('offsetHeight')

.outerWidth() <==> .get('offsetWidth')
.position()  // {left: 123, top: 456} <==> .getXY() // [123, 456]

 

http://www.jsrosettastone.com/