2011
Dec
13

網頁好讀版

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
範例
  1. <script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
  2. YUI().use('node', 'event', function (Y) {
  3. var obj=Y.one(".a1");
  4. var content=obj.getContent();
  5. Y.one("#box_yui").setContent(content);
  6. Y.one("#box_yui").append(" <br />append:"+content);
  7. //get Attribute
  8. var attr=Y.one("#box_yui").get('id');
  9. Y.one("#box_yui").append(" <br />attr:"+attr);
  10. var fontSize=Y.one('.a1').getStyle('fontSize');
  11. Y.one('.a1').setStyles({"fontSize":"12px","backgroundColor":"#efefef","padding":"10px"});
  12. }

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
範例
  1. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  2. var content=$(".a2").html();
  3. $("#box_jquery").html(content);
  4. $("#box_jquery").append(" <br />append:"+content);
  5. //get Attribute
  6. var attr=$("#box_jquery").attr('id');
  7. $("#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
範例
  1. var content=document.getElementById('data_js').innerHTML;
  2. document.getElementById('box_js').innerHTML=content;
  3. //使用 += append
  4. document.getElementById('box_js').innerHTML+=" <br />append:"+content;
  5. //使用 tag append
  6. var span=document.createElement('span');
  7. span.innerHTML=" <br /> appendChild data"
  8. document.getElementById('box_js').appendChild(span);
  9.  
  10. //get attribute
  11. var attr=document.getElementById('data_js').id;
  12. 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中就比較麻煩一點:
範例
  1. if(!document.getElementById('a_js').className)
  2. document.getElementById('a_js').className="newClass";
  3. else
  4. document.getElementById('a_js').className+=" newClass";

Node 進階語法 Part 3

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

網頁好讀版