从jQuery[1.4.2] 迁移到 YUI3[3.1.2]_jquery1.4升级到3.4-优快云博客

本文档提供了从jQuery迁移到YUI3的详细指南，包括常见语法转换、选择器等效替换、DOM操作方法对照及Ajax调用方式对比等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 }

});