YAHOO YUI工具库(一)

繁简对译:[]  字体设置:[] 2009-10-13  作者:来自网络  来源:来自网络  阅读  次

1.1. YAHOO工具库提供的方法
l namespace

用于创建一个全局的命名空间,使用YUI时,首先会自动创建widget,util,example三个命名空间,使用时也可以自定义命名空间。类似于在程序中建了了一个static变量。

l lang

javascript扩展的语言工具,用于判别对象的类型。

l lang.extend

用于从一个对象上扩展出另一个对象,模拟了类的继承的方式,但不同的是,在创建子对象时,父对象的构造函数不会自动调用。父对象的引用存放在了子对象的supperclass中,构成了一个链状继承关系。在2.2.2的版本中,YAHOO.lang.extend和YAHOO.extend指向同一函数对象。

l lang.augment

将一个对象的属性(部分或全部)复制到另一个对象,但并非真正意义上的复制,只是一种引用。YAHOO.augment=YAHOO.lang.augment。

l log

用来调试的一个工具,将信息显示到log控件。

l env

环境信息和YUI组件信息

l YUI_config.listener

可以定义自己的回调函数,当有新的YUI组件加载到页面时将会调用YUI_config.listener指向的函数。



2. YUI提供的Dom操作
特点:对于大部分DOM操作提供了批量操作的功能,而对用户只需使用统一的函数接口就能完成单个或批量的操作,主要得益于DOM内部的batch方法。



2.1. Element的查找
YAHOO.util.Dom.get(element)

调用document.getElementById(element),获取指定的页面元素。



YAHOO.util.Dom.getElementsBy(method,tagName,rootNode)

在rootNode的子节点中按照用户提供的method方法在所有标签为tagName的element中查找符合条件的节点。rootNode不指定则在整个Document中查找,method是一个method(elementID)类型的函数对象,该函数对象的返回值为Boolean值。



YAHOO.util.Dom.getElementsByClassName(className, tagName, rootNode)

返回指定根节点下所有标签为tagName,class为className的DOM节点数组。根节点为可选参数,不指定时在整个页面中查找



YAHOO.util.Dom.inDocument(el)

判断元素el是否在当前的DOM中,支持批量操作。



2.2. 样式控制和访问
YAHOO.util.Dom.hasClass(element, className)

判断element标签上是否指明了className的class,支持批量操作



YAHOO.util.Dom.addClass(element, className)

给指定标签增加名为className的class,支持批量操作.



YAHOO.util.Dom.removeClass(element, className)

删除element上的名为className的class,支持批量操作



YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName)

替换element上的oldClassName样式为newClassName,支持批量操作



YAHOO.util.Dom.getStyle(element, property)

获取element的style中的property属性,支持批量操作



YAHOO.util.Dom.setStyle(element,property,pValue)

设置element的style的property属性为pValue,支持批量操作



注:本节中的class指的是CSS中定义的class。



2.3. 位置控制和访问
位置控制的相关函数

YAHOO.util.Dom.setX

YAHOO.util.Dom.setY

YAHOO.util.Dom.setXY

YAHOO.util.Dom.getX

YAHOO.util.Dom.getXY 返回元素坐标 [ left,top ]

YAHOO.util.Dom.getRegion

获取元素的坐标Region对象{left,top,right,bottom}

可支持批量操作



获取页面可视面积的高度和宽度

YAHOO.util.Dom.getClientWidth

YAHOO.util.Dom.getClientHeight



获取Document的高度和宽度

YAHOO.util.Dom.getDocumentWidth

YAHOO.util.Dom.getDocumentHeight



获取页面可视区域的高度和宽度(不包含滚动条)

YAHOO.util.Dom.getViewportHeight

YAHOO.util.Dom.getViewportWidth



Region对象:{left,top,right,bottom}

YUI提供的一个对象,用于完成多个矩形区域间的计算(如相交,包含。

YAHOO.util.Region.contains(region)

判断是否包含了region区域

YAHOO.util.Region.getArea

计算面积

YAHOO.util.Region.intersect(region)

计算与region区域的交迭区域

YAHOO.util.Region.union(region)

计算与region区域求并集(即包含两个区域的最小区域)



Point对象:{x,y}

YUI提供的对象,用于定义坐标点。

3. YUI提供的element工具
YUI提供了一组操作页面element的工具,是对标准HTML elements的一种封装,能够直接通操作element的实例,使得增加监听器,操作DOM,设置/获取element的属性等工作变得很简单。部分方法是直接调用YUI的DOM工具集提供的方法,如对class操作的相关方法、获取element的相关方法等等,在此不再重复。

YAHOO.util.Element(elementId)

创建element,如果elementId在Document中还不存在,仍然可以通过YUI对他进行属性设置,增加监听器等操作, Element工具集会自动等到该elementId可用后执行这些操作,实际上真正的操作是等到contentReady事件发生后才进行的。



YAHOO.util.Element.appendChild(child)

在DOM结构中element下增加子节点



YAHOO.util.Element.getElementsByTagName(tag)

获取tagName为tag的所有页面元素



YAHOO.util.Element.hasChildNodes

判断是否具有子节点



YAHOO.util.Element.insertBefore(element, before)

在元素before前插入element



YAHOO.util.Element.removeChild(child)

删除DOM中元素的child子节点



YAHOO.util.Element.replaceChild (newNode , oldNode)

替换子节点oldNode为newNode

打印 收藏 关闭