YUI3 入门

大家好，又见面了，我是你们的朋友全栈君。

1. 调用方法：

既然我们是使用的YUI这个js库，那么肯定第一步就是引用这个文件，刚才在上面已经说了我们要使用的是yui-min.js这个文件，当然你可以对他进行改名，你只需要到你下载的yui库的文件中找到他，将其拷到你需要的目录就OK啦，那么掉用方法的是：

在之间插入以下代码：

<script src=”yui-min.js” type=”text/javascript”></script>

注意：src后面的地址请根据实际情况填写，当然你也可以使用官方提供的地址，请看： <script src=”http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js” type=”text/javascript”></script>

我个人觉得如果你仅仅想试一下yui的功能，可以用用官方的地址，免得自己下载啦，嘿嘿！

2. 实现我们的功能

当我们已经调用好Yui这个js库以后，接下来就得看我们自己的了，如何通过Yui来实现我们想要的功能呢，嘿嘿，请看：

1、Yui 3最基本的使用格式：

YUI().use(”node”, function(Y) {

// 书写你的js代码

});

就是要使用Yui 3提供的方法，就必须得将他们写在上面这个大括号之内，不然无法使用。

2、Yui 3获取对象的方法：她获取对象的方法有很多种，下面我们来看看常用的几种方法：（在使用这些方法的时候都需要在方法前加Y）

a、get()方法

get方法获取id和class对象的方法：Y.get(”#id”);Y.get(”.class”);

注意，在括号中必须用引号将他们引起来，看看，如果你对CSS很熟悉的话，就应该知道，我们在为id书写样式的时候前面用的是#，为class书写 样式的时候前面使用的是.号。在Yui 3的get方法中也是这样的。那么get方法获取到的都是单个对象，还有就是如果你又想获取一个对象，他又有Id又有class的呢，那也可以使用get 方法：Y.get(”#id”).get(”.class”);这样就可以啦。

b、all()方法

刚才我们看了get方法获取的都是单个对象，那如果我们想获取所有据有相同class的属性的对象怎么办，哈哈，不要急，Yui想到了，他提供了很 多种方法，但是我觉得最简单的一种方法就是：Y.all(”.calss”);这样就可以获取到了所有据有class名称的class的对象，注意，这里 得到是一个数据。

3、addClass()

这个一看，就应该明白了吧，我们经常在js中都可能用到的为一个对象增加class，哈哈，在这里我们可以使用它啦，使用方法就是：myNode.addClass(’foo’);

4、styles()

光有了设置class还不行，因为有时候我们还需要设置对象的style值，故而引入了styles()方法，使用方法：myNode.setStyle(’opacity’, 0.5);

5、Yui事件监听函数：

Y.on(事件,函数,对象);

如果你对js比较熟悉的话，你应该清楚，js中有事件监听函数，但是IE和DOM是有区别的，注意，Opera支持IE和DOM的两种监听函数，以 前为了兼容多个浏览器，我们需要单独写一个兼容的函数，而在Yui3不需要，如果你想使用的话，可以直接使用Y.on(事件,函数,对象);

事件分为多种，一般我们经常用到的是鼠标与键盘：

鼠标：click，dblclick，mouseover，mousedown，mousemove，mouseup

我们只需要将相应的事件用引号包起来填入事件的值就行了。还有就是这里的对象可以接受单个的对象，他还可以接受数组，比如单个的id,我们可以使 用#id,也可以设置id下的标签，#id li，还可以使用为多个对象设置，就是上面说到的是数组方式[“#id”,”#id1″]依次类推。

yui不仅仅只有这几个方法的，还有很多，比如 set，get,appendChild,test,removeClass,getXY,getX,gety还有很多。