我讨厌 YUI 3 .....第一天 Node

YUI 的遠征

學Javascript到現在，算一算也快7年了，當然這裡七年中也包含大學混過去的四年 XD ， 從最基本的Javscript 沒有 framework 開始學，雖然當時碰到跨瀏覽器的問題，會想寫信給微軟去罵一下IE，不過我解問題也解得很開心就是了 = =

後來開始學習 JQuery 時就輕鬆多了，工作量少了一大半，寫 code 像在飛一樣，記得有一回，在A公司面試的時候，對方問我說：「你有沒有把 JQuery 的 Document 全部看過」，我那時回答沒有，而且我也覺得，沒特殊需求的話，沒必要全部看完，可是那時好像有點被輕視的感覺，回家後跟老婆報告這件事情，老婆才提醒我說，其實我有看過 JQuery 的原始碼，這比看 Document 更屌呀 XD...

在面對 YUI，我總覺得他的功能太多，線上教學又不清楚，不容易上手，下載的檔案又過大，完全都不想去碰他，現在....，新公司前端程式全部都用 YUI 來製作 ， 如果不會 YUI ，變成無法去動前端程式，害得我不得不去學 YUI，於是乎...開始了...YUI 的遠征....

Node 基本語法

YUI都把 HTML Tag 稱作 Node ，這裡我也入境隨俗，直接把這些 div 、a 、span 等等的 HTML tag 叫 Node，YUI Node 的功能，主要是針對 Tag 來做操作，像是改變 html ,css ,id 的值，隱藏或顯示Tag等功能，都可以使用 YUI Node 來完成。

YUI3 基本語法

介紹一些基本的 YUI Node 語法

• Y.one(".a1") : 取得 class=a1 的 html Tag
• node.getContent() : 取得 tag 的 html值
• node.setContent("xxx") : 設定 tag的 html值
• node.get('id') : 取得 tag的屬性值
• node.get('parentNode') : 取得上一層的 node
• node.set('id','idvalue') : 設定 tag 的屬性值
• node.append("test") : 插入 html 在 tag 的最底端
• node.getStyle('fontSize') : 取得 css style
• node.setStyle("fontSize":"12px","padding":"10px"}) : 設定 css style

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
YUI().use('node', 'event', function (Y) {
   var obj=Y.one(".a1");
   var content=obj.getContent();
   Y.one("#box_yui").setContent(content);
   Y.one("#box_yui").append(" <br />append:"+content);
   //get Attribute
   var attr=Y.one("#box_yui").get('id');
   Y.one("#box_yui").append(" <br />attr:"+attr);
   var fontSize=Y.one('.a1').getStyle('fontSize');
   Y.one('.a1').setStyles({"fontSize":"12px","backgroundColor":"#efefef","padding":"10px"});
}

JQuery 對應的語法

來看看同樣的功能，用JQuery 如何達到。

• $(".a2") : 取得 class=a2 的 tag
• $("#box_jquery").html() : 取得 html值
• $("#box_jquery").html(content) : 設定 html 值
• $(".a2").attr('id') : 取得 tag 屬性值
• $(".a2").attr({"id":"idvalue"}) : 設定 tag 屬性值
• $("#box_jquery").append("append:") : 插入 html 在 tag 的最底端
• $('.a2').css('color') : 取得 css style
• $('.a2').css({"color":"red","fontSize":"12px"}) : 設定 css style

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
var content=$(".a2").html();
$("#box_jquery").html(content);
$("#box_jquery").append(" <br />append:"+content);
//get Attribute
var attr=$("#box_jquery").attr('id');
$("#box_jquery").append(" <br />attr:"+attr);

Javascript 對應的語法

同樣的功能，Javascript 又可以怎麼做到呢。

• document.getELementById("a3") : 取得 id=a3 的 tag
• document.getElementsByTagName("div") : 取得 tag=div 的 tag list
• node.innerHTML : 取得 html值
• node.innerHTML="content" : 設定 html 值
• node.id : 取得 tag 屬性值
• node.id="idvalue" : 設定 tag 屬性值
• node.appendChild(node2) : 插入一個新的tag 在 舊的tag最底端
• node.style.fontSize : 取得 css style
• node.style.fontSize="16px" : 設定 css style

var content=document.getElementById('data_js').innerHTML;
document.getElementById('box_js').innerHTML=content;
//使用 += append
document.getElementById('box_js').innerHTML+=" <br />append:"+content;
//使用 tag append
var span=document.createElement('span');
span.innerHTML=" <br /> appendChild data"
document.getElementById('box_js').appendChild(span);
 
//get attribute
var attr=document.getElementById('data_js').id;
document.getElementById('box_js').innerHTML+="<br />attr:"+attr;

Node 應用 Part 2

YUI Node 基本應用 Part 2

假設 node = Y.one('div');

• node.hide() : 隱藏 html Tag
• node.show() : 顯示 html Tag
• node.remove() : 移除 html Tag
• node.addClass('newClass') : 新增新的 class name

JQuery Node 基本應用 Part 2

看一下 Jquery 對應的語法吧， node=$('div')

• node.hide() : 隱藏 html Tag
• node.show() : 顯示 html Tag
• node.parent() : 取得上一層的 node
• node.remove() : 移除 html Tag
• node.addClass('newClass') : 新增新的 class name

Javascript Node 基本應用 Part 2

看一下 Jquery 對應的語法吧， node=document.getElementById('id');

• node.style.display="none" : 隱藏 html Tag
• node.style.display="block" : 顯示 html Tag
• node.parentNode.removeChild(node) : 移除 html Tag
• 新增一個 class name 在Javascript中就比較麻煩一點：

if(!document.getElementById('a_js').className)
   document.getElementById('a_js').className="newClass";
else
   document.getElementById('a_js').className+=" newClass";

Node 進階語法 Part 3

• Y.one('.child').inRegion(Y.one('.parent'),true) : 判定 child 是否在 parent 的巢狀結構中。