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還有很多。