YUI Node and jQuery

The Node Utility provides an expressive way to collect, create, and manipulate DOM nodes. Each Node instance represents an underlying DOM node, and each NodeList represents a collection of DOM nodes. With Node, you can manage classNames (myNode.addClass(‘foo’)) and styles (myNode.setStyle(‘opacity’, 0.5)), create elements (Y.Node.create(‘< div id="foo" class="foo">< p>foo’)), and much more.[..sorry ,if i don't change the created html code,it will be showd HTML,not source]

Note: The method Y.get has been deprecated in favor of Y.one. The methods Node::query and Node::queryAll have been deprecated in favor of Node::one and Node::all. They still function as expected in this release, but support will be removed in a subsequent release.

The easiest way to include the source files for Node and its dependencies is to add the YUI seed file to your page, using the following script tag, and allow the YUI instance to download any additional files which may be required:


// Create new YUI instance, and populate it with the required modules
YUI().use('node', function(Y) {

    // Node available, and ready for use.

});
jQuery(function($){

});
(function($){

})(jQuery);

you can see the detail page on “http://developer.yahoo.com/yui/3/node/”
PS:
on the end ,i find a bug on jquery,please look these codes:


when i open this page on browser,it showed blank page.so i changed it


it’ok…

Getting Started From YUI – YUI Global Object

YUI Global Object是YUI的基类,他是YUI的核心,也为YUI其他所有的方法、功能提供了接口 。如果你想使用YUI类库,必须要在全用YUI其他类库前就要加载它。YUI GlobalOject 就象一个种子,你所有的的模块都是基于它而制作的。所以我们必须要先加载他才成。

YUI Global Object从名字也能看出,他建了一个全局对象。它可以被实例化,而且他也为基于YUI的模块提供了约束条件。

YUI的使用也和jQuery差不多,只是部分的使用方式有点不一样。
这个是官方的简单例子,看得出使用方法确实和jQuery很相似

YUI().use('dd-drop', 'anim', function(Y) {
    // Y.DD is available
    // Y.Anim is available
});
$.each(function(){
    //xxx。 循环
});

YUI的一些模块名都比较简单,而且似乎名词还相当简单,还是一个缩写,如anim代表了Animation,dd代表了Drag-Drop,event代表了DOM Element Utilites。
YUI()也可以象jQuery一样,用简单的方式来进行调用。

var Y = YUI();
var j = jQuery.noConflict();

也可以通过add方法来添加自定义模块。

YUI().add('functionname',function(Y){
    Y.namespace('mynamespace');
    Y.mynamespace.Modes = function(){
         //expose API
    }
},{
    requires:['base']
});
jQuery.functionname = function($){
    //....在function的参数用$后,就可以在这个函数空间里采用了$
}

YUI在使用一些方法之前还可以使用一定的参数。或者说是临时改变运行的环境变量?官方的例子是这样的

YUI({
       lang: 'ko-KR,en-GB,zh-Hant-TW', // languages in order of preference
       base: '../../build/', // the base path to the YUI install.  Usually not needed because the default is the same base path as the yui.js include file
       charset: 'utf-8', // specify a charset for inserted nodes, default is utf-8
       loadOptional: true, // automatically load optional dependencies, default false
       combine: true, // use the Yahoo! CDN combo service for YUI resources, default is true unless 'base' has been changed
       filter: 'raw', // apply a filter to load the raw or debug version of YUI files
       timeout: 10000, // specify the amount of time to wait for a node to finish loading before aborting
       insertBefore: 'customstyles', // The insertion point for new nodes
       // one or more external modules that can be loaded along side of YUI.  This is the only pattern
       // that was supported in 3.0.0 for declaring external modules.  3.1.0 adds 'groups' support,
       // which is an easier way to define a group of modules.  See below.
       modules:  {
           yui2_yde_datasource: {
               fullpath: 'http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/datasource/datasource-min.js'
           },
           yui_flot: {
               fullpath: 'http://bluesmoon.github.com/yui-flot/yui.flot.js',
               requires: ['yui2_yde_datasource']
           }
       },

       // one or more groups of modules which share the same base path and
       // combo service specification.
       groups: {
           // Note, while this is a valid way to load YUI2, 3.1.0 has intrinsic
           // YUI 2 loading built in.  See the examples to learn how to use
           // this feature.
           yui2: {
               combine: true,
               base: 'http://yui.yahooapis.com/2.8.0r4/build/',
               comboBase: 'http://yui.yahooapis.com/combo?',
               root: '2.8.0r4/build/',
               modules:  { // one or more external modules that can be loaded along side of YUI
                   yui2_yde: {
                       path: "yahoo-dom-event/yahoo-dom-event.js"
                   },
                   yui2_anim: {
                       path: "animation/animation.js",
                       requires: ['yui2_yde']
                   }
               }
           }
       }
}).use('dd', 'yui_flot', function(Y) {
    // All YUI modules required to get drag and drop to work are now loaded.
});

初次学习。也是初步了解,参考页面为:http://developer.yahoo.com/yui/3/yui/,以后我会更加多次使用,因为我觉得YUI有两方面集成的不错,YUICSS做页面还是很不错的。而我又不会做页面所以。。。
当然easyUI也考虑在用。