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

免责声明：我根本没有使用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('
An extra item
'); 

4.基本事件绑定：每次单击LI元素时显示警报。

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

Answer 1

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

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

＃1：你需要包含这个：

代码是：

 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 += '
An extra item
'; 

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

这是代码：

 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中编写代码非常冗长。在即将到来的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('
An extra item
')); // #4 Y.all('li').on('click', function() { alert('Clickety-click!'); }); }