51CTO下载-yui+3.0+学习笔记

YUI 3 学习笔记（1）-YUI Global对象

YUI模块是YUI3中的单一核心，所有需要使用YUI3的页面都必须包含该

模块，该模块提供加载功能，可以使用该功能动态加载指定模块，其依

赖模块会被自动加载，所以YUI模块可以看成YUI的一个种子。

YUI模块创建了一个全局对象：YUI，一个页面可以共享一个YUI实例，也

可以使用多个实例。

1 要使用YUI全局对象，只需添加如下引用：

Html代码

2 如果你想要使用拖放和动画功能，可以使用use()方法加载：

Javascript代码

该方法的最后一个参数是一个回调函数，该函数在完成所有指定模块的加载

后被调用，调用时传递一个参数：一个YUI的实例。

3 YUI全局对象有一个Lang对象，其中没有设什么新鲜东西，就是javascript 语言

本身的一些功能，但是在这里做了一个统一以便于使用：

Javascript代码

YUI 3 学习笔记（2）- Node

Node是用来操作DOM node的工具，实际上每一个Node实例都代表着一个DOM node，每一

个NodeList都代表着一组DOM node.

从YUI2.x到YUI3.0相关的api发生了一些变化，具体可以参见本文的最后部分。

1. 要使用Node，首先要引入YUI3的种子文件：

Html代码

然后加载相应模块：

Javascript代码

2. 获得Node

可以使用YUI.one()获取Node，该方法的参数可以是一个Node，也可以是一个选择器（selector）,

在使用选择器时，返回第一个匹配的元素。默认情况下css3选择器不被支持，如果要使用，需要

加载“selector-css3”模块。关于css3 selector可以参见这里：

/TR/css3-selectors

以下是使用YUI.one()的例子：

Javascript代码

3. 访问Node属性

可以使用Node的set，get方法访问Node的属性，需要注意的是如果返回节点的话返回的是

YUI Node而不是DOM node，这一点在其他地方也要注意。

以下是相关的例子：

Javascript代码

4. 事件监听

可以用on方法添加事件监听器：

Javascript代码

5. DOM方法

Y.Node提供了所有DOM node的原有方法

6. NodeList的使用

NodeList提供了与Node相似的API，但是它的处理时对所有NodeList中的所有Node作用的。

例如如下代码对demo的所有子元素添加'bar'类：

Javascript代码

7. 查找

Node提供one，all，test方法分别实现查找第一个匹配元素，查找所有匹配元素，测试

是否存在匹配元素的功能

8. YUI 2.x和YUI 3.x的对应表

YUI2.x的Node功能是由YAHOO.util.Dom提供的，其与YUI3.0的对应关系如下：

（图太大·在下面···）

YUI 3 学习笔记（3）- Event

YUI的Event包可以用来操纵DOM事件，也可以自定义事件。

1. 要使用Event，首先要引入YUI3的种子文件：

Html代码

然后加载相应模块：

Javascript代码

2. 设置事件响应函数:on()

有两个on方法，一个是YUI的，一个是Node的

Y.on("click", handleClick, "#foo p") 设置元素"#foo p"的click事件处理函数为handleClick。

foo.on("click", handleClick) 的作用与上面的一样

对于YUI的on方法，参数如下：

1) 事件名。关于各事件在主要浏览器中的兼容性，可以参见这里：

/dom/events/index.html

2) 事件处理句柄

3) 元素，可以是多个，多个的写法是这样：["#foo p", "#bar"]

4) 上下文对象，即事件处理函数中的this,如果忽略，就是target元素的Node

5) 参数，可以有多个，按顺序为事件处理函数中event之后的参数

3. 移除事件响应函数

有三种方式：

1) 在事件名前加前缀，然后用YUI的detach移除

2) 保存事件句柄，然后通过该句柄移除

3) 用YUI的detach，指定事件名、处理函数和元素

Javascript代码

另外，Event.purgeElement可以清理所有通过on添加的事件处理函数，而且可以

设定是否对子元素递归清理。

4.模拟鼠标事件

可以通过Node.simulate()模拟鼠标事件，可以模拟7种鼠标事件：

* click

* dblclick

* mousedown

* mouseup

* mouseover

* mouseout

* mousemove

同时可以指定一些附加信息，例如：

Javascript代码

模拟按下Shift键的click事件，这些附加信息包括：

* detail - click的次数.

* screenX/screenY

* clientX/clientY

* ctrlKey/altKey/shiftKey/metaKey

* button - 0：左，1：右, 2：中

* relatedTarget

5. 模拟键盘事件

可以模拟以下事件：

* keyup

* keydown

* keypress

keyup和keydown必须指定keyCode，keypress必须指定charCode，另外还可以指定ctrlKey, altKey, shiftKey和metaKey，以下是几个例子：

Javascript代码

6. available(onAvailable)和contentready(onContentReady)事件