Home/ Questions/Q 200963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T17:09:27+00:00

Disclaimer: I have no experience using YUI at all. I was wondering how the

  • 0

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!');
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js"></script>

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