YUI3学习积累

1.Include Dependencies:
<script type="text/javascript" charset="utf-8"
        src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js">
</script>

2.The YUI Instance:
YUI().use('node', function(Y) {
 
    // Node available, and ready for use.
 
});

3.Getting a Node:
YUI().use('node', function(Y) {
    var node1 = Y.one('#main');
    var node2 = Y.one(document.body);
});

4.Using Node:
  4.1Accessing Node Properties:
  YUI().use('node', function(Y) {
    var node = Y.one('#foo');
    var parent = node.get('parentNode'); // Node instance
 
    var html = 'I am "' + node.get('id') + '".';
    html += 'My parent is "' + parent.get('id') + '"';
 
    node.set('innerHTML', html);
});

  4.2DOM Events
  YUI().use('node', function(Y) {
    Y.one('#demo').on('click', function(e) {
        e.preventDefault();
        alert('event: ' + e.type + ' target: ' + e.target.get('tagName'));
    });
});

  4.3DOM Methods
  YUI().use('node', function(Y) {
    var node = Y.one('#demo');
    var node2 = node.appendChild(Y.one('#foo p'));
    node2.addClass('bar');
});

  4.4Using NodeList
  YUI().use('node', function(Y) {
    Y.all('#demo li').addClass('bar');
});

  YUI().use('node', function(Y) {
    Y.one('#demo').get('children').addClass('bar');
});

  4.5Node Queries
  YUI().use('node', function(Y) {
    var node = Y.one('#demo');
 
    var node2 = node.one('p');
    if (node2) { // might be null
        node2.addClass('bar'); // adds "bar" to the first paragraph descendant of #demo
    }
 
    node.all('p').addClass('bar'); // adds "bar" to all paragraph descendants of #demo
 
    if (node.test('.foo.bar')) { // "if node has both foo and bar classNames"
        node.removeClass('bar');
    }
});

   4.6ARIA Support
   YUI().use('node', function(Y) {
    var node = Y.one('#toolbar').set('role', 'toolbar');
});

YUI().use('node', function(Y) {
    Y.one('#rootmenu').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });
});

5.method
 
myNode.addClass
NodeList[methodName], NodeList.each, or Y.each
Y.guid
Y.one Note strings are now treated as selectors (e.g. "Y.one('#foo')" vs. "YAHOO.util.Dom.get('foo')")
myNode.ancestor
myNode.ancestor
myNode.ancestor
myNode.get('children')
myNode.all
myNode.get('viewportRegion')
myNode.get('docHeight')
myNode.get('docScrollX')
myNode.get('docscrollY')
myNode.get('docWidth')
myNode.all
myNode.all
myNode.one
myNode.one
myNode.one
myNode.one
myNode.next
myNode.next
myNode.previous
myNode.previous
myNode.get('region')
myNode.getStyle
myNode.get('winHeight')
myNode.get('winWidth')
myNode.getXY
myNode.getXY
myNode.getXY
myNode.hasClass
myNode.inDoc
myNode.insert
myNode.insert
myNode.contains (Note myNode.contains(myNode) === true)
myNode.removeClass