Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Handbook - From jQuery to YUI 3

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

Handbook - From jQuery to YUI 3

  1. 1. Handbook -From jQuery to YUI clayliao@ April, 2012
  2. 2. About  Ying-Hsiang, Liao  @clayliao  Y! Search F2E  blog 2
  3. 3. 0. YUI 很 Nice 的,這其中一定有什麼誤會GETTING STARTED 3
  4. 4. 動態加載 : YUI().use(*, fn) jQuery 1.7.2 YUI 3.5 $.foo.bar(); YUI().use(node, function (Y) { Y.foo.bar(); }); //Simple YUI Y.foo.bar() 4
  5. 5. 金手指 : YUI 3 動態加載 需要時自動判斷並載入相依檔案 節省頻寬並加速 開發者不需要自行維護 5
  6. 6. 1. 使用熟悉的 CSS 語法找到目標元素CSS SELECTORS 6
  7. 7. jQuery 1.7.2 YUI 3.5$(#id) Y.one(#id)$(.class) Y.all(.class)$(div.class) Y.all(div.class)$(parent child) Y.all(parent child)$(parent > child) Y.all(parent > child) 7
  8. 8. 金手指 : API 設計概念 Y.one() ( 隱含目標只有一個,回傳值為 Node 物件 Y.all() 隱含目標至少有一個以上,回傳值為 NodeList 物件 8
  9. 9. jQuery 1.7.2 YUI 3.5$(:text) Y.all(input[type=text])$(:submit) Y.all(input[type=submit]$(:radio) )$(:last-child) Y.all(input[type=radio]… ) Y.all(:last-child) … 9
  10. 10. jQuery 1.7.2 YUI 3.5$(div:even) Y.all(div).even()$(div:odd) Y.all(div).odd()$(:empty) Y.all(:empty) 10
  11. 11. 2. 隨心所欲地操作目標元素DOM HANDLING 11
  12. 12. jQuery 1.7.2 YUI 3.5var foo = $ var foo =(div.foo:first); Y.one(div.foo);foo.method(); if (foo) { foo.method(); } 12
  13. 13. jQuery 1.7.2 YUI 3.5var foo = $ var foo =(div.foo); Y.all(div.foo);if (foo.length) { if (foo.size()) { //do something //do something} } 13
  14. 14. jQuery 1.7.2 YUI 3.5.find(p.foo:first) .one(p.foo).find(p.foo) .all(p.foo) 14
  15. 15. jQuery 1.7.2 YUI 3.5$(<div/>) Y.Node.create(<div/>) 15
  16. 16. jQuery 1.7.2 YUI 3.5.html(foo) .setContent(foo).text(foo) .set(text, foo).val(foo) .set(value, foo) 16
  17. 17. jQuery 1.7.2 YUI 3.5.html() .get(innerHTML).text() .get(text).val() .get(value) 17
  18. 18. 金手指 : API 設計概念 jQuery 1.7.2 YUI 3.5無參數表示 get Getter/setter 設計html() .get(text)有參數表示 set .set(text, foo)html(foo) 18
  19. 19. jQuery 1.7.2 YUI 3.5.attr(foo) .getAttribute(foo).attr(foo, bar) .setAttribute(foo, bar) 19
  20. 20. jQuery 1.7.2 YUI 3.5.siblings() .siblings().siblings(selector) .siblings(selector) .siblings(fn) 20
  21. 21. jQuery 1.7.2 YUI 3.5.next() .next().next(selector) .next(selector) .next(fn) 21
  22. 22. jQuery 1.7.2 YUI 3.5.prev() .previous().prev(selector) .previous(selector) .previous(fn) 22
  23. 23. jQuery 1.7.2 YUI 3.5.parent() .get(parentNode).children() .get(children).closest(selector) .ancestor(selector) .ancestor(fn)$.contains(node, .contains(descendant) descendant) 23
  24. 24. jQuery 1.7.2 YUI 3.5parent.append(<div/>) parent.append(<div/>)child.appendTo(parent) child.appendTo(parent) 24
  25. 25. jQuery 1.7.2 YUI 3.5.show() .show().hide() .hide() 25
  26. 26. 3. 找到目標元素後,改變長相CSS 26
  27. 27. CSS class name manipulation jQuery 1.7.2 YUI 3.5 .addClass(foo) .addClass(foo) .removeClass(foo) .removeClass(foo) .toggleClass(foo) .toggleClass(foo) .hasClass(foo) .hasClass(foo) 27
  28. 28. Replace nodes CSS class foo with bar jQuery 1.7.2 YUI 3.5 .removeClass(foo). .replaceClass(foo, addClass(bar) bar) 28
  29. 29. Set single/multiple CSS property jQuery 1.7.2 YUI 3.5 .css(display, .setStyle(display, block) block) .css({ .setStyles({ height: 100, height: 100, width: 100, width: 100, display: block display: block }) }) 29
  30. 30. Get the current value for a CSS property jQuery 1.7.2 YUI 3.5 .css(display) .getStyle(display) 30
  31. 31. Height / width. Excludes padding andborders jQuery 1.7.2 YUI 3.5 .height() .getComputedStyle(height) .width() .getComputedStyle(width) 31
  32. 32. Height / width. Includes padding but notborder jQuery 1.7.2 YUI 3.5 .innerHeight() .get(clientHeight) .innerWidth() .get(clientWidth) 32
  33. 33. Height / width. Includes padding andborder jQuery 1.7.2 YUI 3.5 .outerHeight() .get(offsetHeight) .outerWidth() .get(offsetWidth) 33
  34. 34. Get/Set x,y coordinates relative to thedocument jQuery 1.7.2 YUI 3.5 .offset() .getXY() // {left: 123, top: // [123, 456] 456, width: 789, height: 1011} .offset({ left: 123, .setXY(123, 456) top: 456 }) 34
  35. 35. 4. 觸發事件與使用者互動EVENT 35
  36. 36. jQuery 1.7.2 YUI 3.5.click(fn) .on(click, fn).focus(fn) .on(focus, fn).blur(fn) .on(blur, fn).mouseout(fn) .on(mouseout, fn).mouseover(fn) .on(mouseover, fn) 36
  37. 37. 金手指 : API 設計概念 jQuery 1.7.2 YUI 3.5 承襲原生 JavaScript 語法 JS: .onClick(fn) YUI: .on(click, fn) 37
  38. 38. jQuery 1.7.2 YUI 3.5$ Y.one("#foo").simulate("c (#foo).trigger(clic lick") k); 38
  39. 39. 5. 常用功能之操作陣列與 NodeList 物件ARRAY VS. NODELIST 39
  40. 40. jQuery 1.7.2 YUI 3.5$ Y.all(.foo).array_metho (.foo).array_method d(args) (args) 40
  41. 41. jQuery 1.7.2 YUI 3.5$(.foo).each( Y.all(.foo).each( function() { function() { this.method(); this.method(); } }); ); 41
  42. 42. 6. 好 Ajax ,不用嗎 ?AJAX 42
  43. 43. jQuery 1.7.2 YUI 3.5$.ajax({ Y.io(url,{ url: url, data: data, data: data, on: {success: success: successFn successFn}); } }); 43
  44. 44. jQuery 1.7.2 YUI 3.5$(#msg).load(/ajax/ Y.one(#msg).load(/ajax test.html); /test.html);//No match api Y.one(#msg).load(/ajax /test.html, #foo); 動態取得資料後, 取代指定區塊 44
  45. 45. jQuery 1.7.2 YUI 3.5$.parseJSON( Y.JSON.parse( {"name":"Y {"name":“jQuery"} UI3"}) ) 45
  46. 46. 7. 藍波丸 : 原生 JavaScript 強化 !LANGUAGE UTILITIES 46
  47. 47. jQuery 1.7.2 YUI 3.5$.trim(foo); Y.Lang.trim(foo); 47
  48. 48. Iterate through an array/object jQuery 1.7.2 YUI 3.5 $.each([1, 2, 3], Y.Array.each([1, 2, 3], fn(index, value)) fn(value, index)) $.each({ key: Y.Object.each({ key: value }, fn(key, value }, fn(key, value)) value)) 48
  49. 49. jQuery 1.7.2 YUI 3.5$.inArray(value, Y.Array.indexOf(value,array) array) 49
  50. 50. jQuery 1.7.2 YUI 3.5$.isPlainObject(obj) Y.Lang.isObject(obj) Y.Lang.isObject(obj, true)$.isEmptyObject(obj) Y.Object.isEmpty(obj) 50
  51. 51. 51
  52. 52. YUI ~= jQuery + jQuery UIONE MORE THING 52
  53. 53. <body class="yui3-skin-sam"> 53
  54. 54. <body class="yui3-skin-night"> 54
  55. 55. Thank you

    Be the first to comment

    Login to see the comments

  • chrisissin

    Apr. 17, 2012
  • chenshin0719

    Apr. 18, 2012
  • reicky

    Apr. 19, 2012
  • faryne

    Apr. 21, 2012
  • happybean

    May. 21, 2012
  • pptpb

    May. 23, 2012
  • abcd1098

    May. 29, 2012
  • withwolf

    Jun. 7, 2012
  • skarred

    Jul. 5, 2012
  • zmax

    Jan. 24, 2013
  • fine246

    Jul. 10, 2013
  • mowd8574

    Nov. 1, 2013
  • ijliao

    Apr. 23, 2014
  • VikramJawandal

    Apr. 30, 2014
  • bryanyuan2

    Sep. 5, 2014
  • hugojay

    Mar. 28, 2016

Views

Total views

8,456

On Slideshare

0

From embeds

0

Number of embeds

4,761

Actions

Downloads

1

Shares

0

Comments

0

Likes

16

×