将以下jQuery代码转换为YUI 2.x代码 [英] Translate the following jQuery code to YUI 2.x code

问题描述

免责声明：我没有任何使用YUI的经验。

Disclaimer: I have no experience using YUI at all.

我在想在YUI中编写的jQuery代码的以下几行如何。此外，由于YUI正在使用分层依赖系统，需要包含哪些 .js 文件才能使代码生效？

I was wondering how the following lines of jQuery code would look when written in YUI. Also, since YUI is using a hierarchical dependency system, which .js files need to be included in order for the code to work?

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

1. Given the ID of an HTML element, apply multiple style rules on the element.

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

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

2. Chaining: given an ID of an HTML element, apply a style rule on it, add a class of bar to it, and set its contents to '!'.

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

3。将 LI 元素追加到 #menu 。

3. Append a LI element to #menu.

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

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

4. Basic event binding: show an alert whenever a LI element is clicked on.

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

推荐答案

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

Disclaimer: I'm not a YUI expert, there may be better ways to do these things.

此外，jQuery还是很善于做你所做的事情。 YUI是为其小部件构建的，所以您可能会发现其核心功能比jQuery的全面性（即，它不会替代您将永远想要使用函数调用进行DOM）。我觉得一个人使用YUI 2.x，因为他们想要的小部件（我使用他们的菜单相当多）。

Also, jQuery is good at doing what you've put up. YUI is built more for its widgets, so you may find its core functionality a little less comprehensive than jQuery's (i.e., it doesn't replace EVERYTHING you would ever want to do the DOM with function calls). I feel like one uses YUI 2.x because they want widgets (I use their menus quite a bit).

＃1：你需要包括这个： p>

#1: You would need to include this:

<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没有链接，所以你的解决方案不会几乎相同：

#2: There is no chaining in YUI 2.x, so your solution won't be nearly the same:

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 = "!";

我不关心链接，我认为这个代码更加可读。 （对于编辑而言）

I don't care for chaining anyways, I think this code is much more readable. (Sorry for the editorializing.)

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

#3: Again, not sure how to set html directly besides just using innerHTML... I would think it'd just be:

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

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

#4: You'll have to include different classes for this solution:

<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在图书馆中一直这样做：

Again, sorry that these may not be the penultimate YUI solutions. Also, if you're worried about the constant usage of "YAHOO.util.longname.method", you can easily just make your own local variable. YUI does this all the time in their libraries:

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

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

这篇关于将以下jQuery代码转换为YUI 2.x代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！