36. Selector
• YUI 2.x
var D = YAHOO.util.Dom;
var el = D.get('foo');
var items =
D.getElementsByClassName('selected','li',el);
• YUI 3.x
var items = Y.all('#foo li.selected');
37. 对Dom的Wrap
• YUI 2.x 用DOM取到的依然是TMLElement
var D = YAHOO.util.Dom;
var el = D.get('foo');
alert(el.nodeName);
• YUI 3.x
var el = Y.one('#foo');
alert(el.nodeName);//undefined
alert(el.get('NodeName'));//DIVs
38. 封装前后的比较
YUI Node HTMLElement
appendChild() appendChild()
removeChild() removeChild()
parentNode parentNode
contains() contains()
insertBefore() insertBefore()
children children
addClass()
toggleClass()
region
39. 统一的接口
• Node
– addClass方法
var el = Y.one('#foo')
el.addClass('red');
• NodeList
– addClass方法
var items = Y.all('#foo li');
items.addClass('red');
42. 被封装后的“事件”
• YUI 2.x
var E = YAHOO.util.Event;
E.on('foo','click',function(e){
alert(e);//click
E.stopEvent(e);//阻止冒泡
});
• YUI 3.x
Y.on('click',function(e){
alert(e.type);//undefined
e.halt();//阻止冒泡
},'#foo');
43. YUI3的所有事件都是CustomEvent
• YUI 3.x
var el = Y.one('#foo');
el.on('click',function(e){
//..
});
var p = new Y.Calendar('#calendar');
p.on('range_select',function(e){
//..
});
