Node: Node Basics yui第一天：node 基本节点

好吧，yui3看起来不错。看了看说明。决定以后学习使用一下。简单的记录下过程吧。

最常用的还是从页面的DOM开始吧。 所以先看看node的基本使用方法。

 

首先 拿出一段html代码来作为实例

<div id="demo"> <p><i>Whose child am I?</i></p> </div>

好了。html有了。现在来看看怎么使用YUI3来获取这个DOM实例

一 获取一个实际的节点

    我们使用 ONE 方法获取节点的实例，ONE方法可以适用于  HTML 元素或者Selector 字符串

var node = Y.one('#demo p');

哦啦。 选取方法也很简单嘛。 Y.one() 然后后面是dom 节点。  像 jquery 的 $();

然后看一看事件是怎么作用在node上的。node的属性允许我们通过set ,get 的方式来获取到。

官方的例子是这样的

YUI().use('node', function(Y) { var node = Y.one('#demo p'); var onClick = function(e) { var tag = e.target.get('parentNode.tagName'); // e.target === node || #demo p em e.currentTarget.one.setContent('I am a child of ' + tag + '.'); // e.currentTarget === node }; node.on('click', onClick); });  

 

因为对yui了解不多。所以根据以上代码。我理解为其把每一个单一实现都放在一个封装里。从获取到事件到结果。

首先通过 Y.one()定义要发生事件操作的DOM或html 元素

然后node.on()定义了事件和要调用的事件函数

而onClick = function(e) 则定义了事件的发生到结束的结果。

 var tag = e.target.get('parentNode.tagName'); // e.target === node || #demo p em
 定义了获取node名称 e.target 就是代替了 node 也就是例子里的 #demo p em 这个内容

哦。第一个例子看完。