最近要写个网页项目，需要很多动态功能，本来想用自己非常熟悉的AS3来做，后来无意中了解了YUI，发现其实现的功能非常强大，而且架构和AS3很接近。于是花了两个小时到其官方网站http://developer.yahoo.com/yui/上深入学习了一下，解决了项目中一些原来非常棘手的问题。
这里是些学习笔记：
================连接类==================
1- YUI connect:
var callback =
{
success: function(res) {}, //正常返回处理函数
failure: function(res) {}, //出错返回处理函数
argument: [argument1, argument2, argument3]
//可以在success函数和failure函数中访
问的变量
}
var transaction = YAHOO.util.Connect.asyncRequest(’GET’, sUrl,
callback,
null);
2- 发送表单：
YAHOO.util.Connect.setForm(formId);
var cObj = YAHOO.util.Connect.asyncRequest(’POST’,
‘http://www.yahoo.com’,
callback);
查看请求是否已经处理完
var cObj = YAHOO.util.Connect.asyncRequest(’
GET’,''http://www.yahoo.com’,callback);
var callStatus = YAHOO.util.Connect.isCallInProgress(cObj);
超时取消请求
var cObj = YAHOO.util.Connect.asyncRequest(’GET’, sUrl,
callback);
setTimeout(”YAHOO.util.Connect.abort(cObj)”,10000);
================事件类==================
3- 事件侦听
YAHOO.util.Event.addListener(element,eventType,fn,obj,override)
参数：
element：为绑定事件的元素id，可以是一个数组，以支持批量操作
eventType：为事件类型
fn：为事件响应的回调函数
obj：当override为true时，为回调函数传入的参数对象；当override为false时，该参数被
忽略。
override：
返回值类型：Boolean
功能：给指定的element绑定事件响应函数
4- 删除事件侦听
YAHOO.util.Event.removeListener:function(element,eventType,fn)
参数：
element：为绑定事件的元素id,
eventType：事件类型
fn：为事件响应函数
返回值类型：Boolean
功能：给指定的element解除绑定事件
5- 侦听装载完成
YAHOO.util.Event.onContentReady ( p_id , p_fn , p_obj , p_override
)
参数：
p_id：为绑定事件的元素id,
p_fn：为事件响应函数
p_obj：同addListener的obj参数
p_override：同addListener的override参数
返回值类型：无
功能：与onAvailable类似，但不同的是事件响应函数是等到element可以安全的修改的时候
才响应。
6- 侦听DOM第一次可用时执行响应函数
YAHOO.util.Event.onDOMReady ( p_fn , p_obj , p_scope )
参数：
p_fn：为事件响应函数
p_obj：同addListener的obj参数
p_scope：同addListener的override参数
返回值类型：无
功能：当DOM第一次可用时执行响应函数。
7- 返回侦听对象
YAHOO.util.Event.getListeners ( el , sType )
参数：
el：HTML element
sType：事件类型，String类型
返回值类型：Object{
type：事件类型
fn：addListener添加的事件响应函数
obj：提供给事件响应函数的参数对象
adjust：否获取缺省的事件监听器
index：UI事件监听器列表中的位置
}
来源：(http://blog.sina.com.cn/s/blog_5d41b3800100gmap.html) - YUI学习笔记_千峰_新浪博客
8- 获取事件发生时的时间
YAHOO.util.Event.getTime( event)
参数：
event：事件对象
返回值类型：Date对象
9- 获取事件发生时的页面标签。对于IE即window.event.srcElement
YAHOO.util.Event.getTarget(ev , resolveTextNode)
参数：
evt：事件对象
resolveTextNode：
返回值类型： HTML element
10- 创建和使用自定义的事件
A.使用CustomerEvent对象创建自己的事件
function TestObj(name) {
this.name = name;
this.event1 = new YAHOO.util.CustomEvent(”event1〃, this);
}
YAHOO.util.CustomEvent = function(type, oScope);
type表示事件类型的字符串
B.注册对自定义事件的响应函数
function Consumer(name, testObj) {
this.name = name;
this.testObj = testObj;
this.testObj.event1.subscribe(this.onEvent1, this);
}
C.响应函数
Consumer.prototype.onEvent1 = function(type, args, me) {
alert(” this: ” + this +
“"n this.name: ” + this.name +
“"n type: ” + type +
“"n args[0].data: ” + args[0].data +
“"n me.name: ” + me.name);
}
11- 当。。。时处理
YAHOO.util.Event.on("toolbar", "focusin", function(e)
{
YAHOO.log("target: " +
e.target.id);
});
或者：
YAHOO.util.Event.on("btn", "click", move);
var move = function(e){...};
<button
id="btn">确认</button>
12- 获取当前鼠标位置
var move=function(e){
YAHOO.util.Dom.setXY('foo',
YAHOO.util.Event.getXY(e));
};
============YAHOO.lang工具===========
包含了语言工具
============YAHOO.widget组件工具===========
包含了很多小的工具，如月历，菜单，表格，对话框，进度条，文本编辑框，树型表，
Uploader等等。（类似于flash的组件）
1- YAHOO.widget.Button
2- YAHOO.widget.ButtonGroup
3- YAHOO.widget.AutoComplete//自动填写表单，将数据或远程数据写入数组
4- YAHOO.widget.Calendar//日历
5- YAHOO.widget.Carousel//图片预览显示
6- YAHOO.widget.ColorPicker
7- YAHOO.widget.Container//包含Module, Overlay, Panel, Tooltip,
Dialog,
SimpleDialog)
8- YAHOO.widget.DataTable//类似EXCEL的数据表格
9- YAHOO.widget.ImageCropper//图像裁剪器
10- YAHOO.widget.LayoutManager
11- YAHOO.widget.Menu
12- YAHOO.widget.Paginator//分页显示器
13- YAHOO.widget.ProgressBar
14- YAHOO.widget.Editor/SimpleEditor//可以做成网页编辑器，功能很多
15- YAHOO.widget.Slider
16- YAHOO.widget.Tab//标签页
17- YAHOO.widget.TreeView
18- YAHOO.widget.Uploader//文件上传组件，要和swf一起使用
19- YAHOO.widget.Charts//图表，生成flash图表
============YAHOO.lang.JSON工具===========
============YAHOO.util.Element工具===========
1- 新建元素
var el = new YAHOO.util.Element('foo');//新建一个id为foo的元件
el.setStyle("color", "#f00");//设置style
el.on('click',
function(e){alert(e.target.getStyle('color'));});//设置事件侦听
el.get('id');//获取id属性
el.get('childNodes');//获取子节点数目
el.get('firstChild');//获取第一个节点
el.hasChildNodes();//检测是否有子节点
el.removeChild(el.get('firstChild'));//删除第一个子节点
el.appendChild(child);//增加节点
el.getElementsByTageName(tag);//获取tagName为tag的所有元素
el.insertBefore(element,before);//在元素before前插入element
el.replaceChild(newNode,oldNode);//替换节点
============YAHOO.util.Dom工具===========
//----元素访问----
YAHOO.util.Dom.get(element);//==document.getElementById(element);
YAHOO.util.Dom.getElementsBy(method,tagName,[rootNode]);//在指定子节点下，通过指
定的方式method找元素
YAHOO.util.Dom.getElementsByClassName(className, tagName,
[rootNode]);//根据
class和id找元素
YAHOO.util.Dom.inDocument(el);//判断元素是否在当前DOM中
//----class样式访问和控制-----
YAHOO.util.Dom.hasClass(element,
className);//判断element上是否使用了className的
class
YAHOO.util.Dom.addClass(element,
className);//给指定element增加class
YAHOO.util.Dom.removeClass(element,className);//删除element上名为className的
class
YAHOO.util.Dom.replaceClass(element, oldClassName,
newClassName);//更新
YAHOO.util.Dom.getStyle(element,
property);//获取element的style中指定的属性值
YAHOO.util.Dom.setStyle(element, property, value);//设定属性值
//----元素位置访问和控制----
YAHOO.util.Dom.setX('element', value);
YAHOO.util.Dom.setY
YAHOO.util.Dom.setXY('element', point:Point);
YAHOO.util.Dom.getX
YAHOO.util.Dom.getXY('element');//返回Point对象
YAHOO.util.Dom.getRegin;//获取Region对象{left,top,right,bottom}
YAHOO.util.Dom.getClientWidth;//获取页面可视面积的高度和宽度
YAHOO.util.Dom.getClientHeight;//
YAHOO.util.Dom.getDocumentWidth;//获取文档的高度和宽度
YAHOO.util.Dom.getDocumentHeight;//
YAHOO.util.Dom.getViewportHeight;//获取页面可视区域的高度和宽度（不含滚动条）
YAHOO.util.Dom.getViewportWidth;
//----Regin对象----
YAHOO.util.Region.contains(region);//判断是否包含了region区域
YAHOO.util.Region.getArea;//计算面积
YAHOO.util.Region.intersect(region);//计算相交区域
YAHOO.util.Region.union(region);//计算两个区域并集
//----Point对象{x,y}----
可以使用数组一次性操作多个元素，如：
YAHOO.util.Dom.setStyle(['el1','el2'],'opacity',0.5);
============YAHOO.util.Resize尺寸变化工具===========
Source from http://blog.sina.com.cn/s/blog_5d41b3800100gmap.html