Translate the following jQuery code to YUI 2.x code

Question

Disclaimer: I have no experience using YUI at all.

---

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. Given the ID of an HTML element, apply multiple style rules on the element.

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

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. Append a LI element to #menu.

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

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

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

Answer 1

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

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: You would need to include this:

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

Code would be:

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

Alternatively...

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

#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: 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: 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>

And here's the code:

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

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...
})();

Answer 2

As you can see from Daniel's answer it's quite verbose to write your code in YUI 2. A lot of work in this area has been done in the upcoming YUI 3. Here's how your code would be written in 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!');
    });
}