Question

免责声明：我根本没有使用过YUI的经验。

我想知道在YUI中编写以下jQuery代码行的样子。此外，由于YUI使用的是分层依赖系统，因此需要包含.js个文件才能使代码正常工作？

1。给定HTML元素的ID，对元素应用多个样式规则。

$('#foo').css({ color: 'yellow', background: 'black' });

2。链接：给定HTML元素的ID，在其上应用样式规则，向其添加bar类，并将其内容设置为“！”。

$('#foo').css('color', 'red').addClass('bar').html('!');

第3。将LI元素附加到#menu。

$('#menu').append('<li>An extra item</li>');

4。基本事件绑定：每当点击LI元素时显示警告。

$('li').click(function() {
 alert('Clickety-click!');
});

Answer 1

免责声明：我不是YUI专家，可能有更好的方法来做这些事情。

此外，jQuery擅长做你提出的事情。 YUI更多是为它的小部件构建的，所以你可能会发现它的核心功能不如jQuery那么全面（即它不会取代你想要用函数调用做DOM的一切）。我觉得有人使用YUI 2.x因为他们想要小部件（我使用他们的菜单很多）。

＃1：你需要包含这个：

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js"></script>

代码将是：

var el = YAHOO.util.Dom.get('foo');
YAHOO.util.Dom.setStyle(el, 'color', 'yellow');
YAHOO.util.Dom.setStyle(el, 'background', 'black');

...替代地

YAHOO.util.Dom.setStyle('foo', 'color', 'yellow');
YAHOO.util.Dom.setStyle('foo', 'background', 'black');

＃2：YUI 2.x中没有链接，所以你的解决方案几乎不一样：

var el = YAHOO.util.Dom.get('foo');
YAHOO.util.Dom.setStyle(el, 'color', 'red');
YAHOO.util.Dom.addClass(el, 'bar');
// Not sure how to set contents with YUI...  would just use:
el.innerHTML = "!";

我不关心链接，我认为这段代码更具可读性。（对不起编辑。）

＃3：再次，不知道除了使用innerHTML之外如何直接设置html ...我认为它只是：

var el = YAHOO.util.Dom.get('menu');
el.innerHTML += '<li>An extra item</li>';

＃4：您必须为此解决方案包含不同的类：

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

这是代码：

var lis = document.getElementsByTagName("li");
YAHOO.util.Event.addListener(lis, 'click', function() {
        alert('Clickety-click!');
    });

再次，抱歉这些可能不是倒数第二个YUI解决方案。此外，如果您担心“YAHOO.util.longname.method”的持续使用，您可以轻松地创建自己的局部变量。 YUI在他们的库中一直这样做：

(function() {
    var Event = YAHOO.util.Event;

    // Insert all your code here...
})();

Answer 2

从Daniel的回答中可以看出，在YUI 2中编写代码非常冗长。在upcoming YUI 3中已经完成了很多工作。以下是您在YUI 3中编写代码的方式：

YUI().use('node', function(Y) {
    // #1
    Y.get('#foo').setStyles({ color: 'yellow', background: 'black' });

    // #2
    Y.get('#foo').setStyle('color', 'red').addClass('bar').set('innerHTML', '!');

    // #3
    Y.get('#menu').appendChild(Y.Node.create('<li>An extra item</li>'));

    // #4
    Y.all('li').on('click', function() {
        alert('Clickety-click!');
    });
}

将以下jQuery代码转换为YUI 2.x代码

2 个答案: