且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-02 16:02:04

免责声明:我不是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...
})();