这个例子演示如何使用YUI Core
创建一个YUI实例
代码
<html>
<body>
<div id="wrapper" style="100px;height:100px;background-color:Yellow;">
i am a div!
</div>
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui.js"></script>
<script>
YUI().use('node', function(Y) {
//在此操作dom
var wrapper= Y.one('#wrapper');
Y.log('Found node.. Setting style');
wrapper.setStyle('backgroundColor', '#D00050');
wrapper.set('innerHTML', '<strong>Changed!</strong>');
});
</script>
</body>
</html>
<body>
<div id="wrapper" style="100px;height:100px;background-color:Yellow;">
i am a div!
</div>
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui.js"></script>
<script>
YUI().use('node', function(Y) {
//在此操作dom
var wrapper= Y.one('#wrapper');
Y.log('Found node.. Setting style');
wrapper.setStyle('backgroundColor', '#D00050');
wrapper.set('innerHTML', '<strong>Changed!</strong>');
});
</script>
</body>
</html>
如果node模块当前页面不存在，use方法将动态获取。如果需要动态加载，那么最后一个参数必须是用于加载完成之后的可执行的函数。不过不管是不是动态加载，这个函数都会执行。因此这是YUI所推荐的一种模式。
上例中的函数提供了一个YUI实例引用，因此我们可以在use内部完成所有工作，而不需要一个其它地方的外部引用。
下面是使用FireBug进行调试，去慢慢发现YUI实例的其他特性。
对wrapper监控发现它两个有趣的东西：
_node对象：对应原生的dom节点
_yuid:"yui_3_0_0-2-12742840392619"
其他就是YUI一些封装的函数，就不详细介绍了，因为我也不大清楚。
对Y监控则发现大量对象属性：
Color、DOM、UA、config（包含doc和win应该是对应文档和窗口）等等，当然还有最基本id、version。这些对象属性咱们暂且不管，相信以后会接触到。