將以下jQuery代碼轉換爲YUI 2.x代碼

Question

聲明：我沒有使用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('<li>An extra item</li>'); 

4.基本事件綁定：只要展示點擊上LI元素的警報。

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

Answer 1

免責聲明：我不是一個YUI專家，可能有更好的方法來做這些事情。

此外，jQuery擅長做你已經忍受。 YUI的構建更多的是它的小部件，所以你可能會發現它的核心功能不如jQuery的全面（也就是說，它並不會取代你一直想用函數調用來完成DOM的任何事情）。我覺得使用YUI 2.x是因爲他們需要小部件（我使用他們的菜單相當多）。

＃1：您需要包括此：

<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中，所以你的解決方案將不會是幾乎相同的：

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：再次，不知道如何直接設置HTML，除了使用innerHTML ...我想它會僅僅是：

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

＃4：你必須包括對這個解決方案不同的類別：

<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確實在他們的圖書館這一切的時候：

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

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

Answer 2

你可以從丹尼爾的回答看不出這是相當冗長編寫代碼在YUI 2.在這方面的許多工作已在upcoming 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('<li>An extra item</li>')); 

    // #4 
    Y.all('li').on('click', function() { 
     alert('Clickety-click!'); 
    }); 
}