• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Handbook - From jQuery to YUI 3
 

Handbook - From jQuery to YUI 3

on

  • 6,810 views

 

Statistics

Views

Total Views
6,810
Views on SlideShare
2,698
Embed Views
4,112

Actions

Likes
14
Downloads
1
Comments
3

24 Embeds 4,112

http://clayliao.blogspot.tw 2966
http://clayliao.blogspot.com 736
http://clayliao.blogspot.hk 134
http://vincentsu.tumblr.com 78
http://karalli.net 72
http://assets.txmblr.com 42
http://clayliao.blogspot.jp 20
http://clayliao.blogspot.ca 15
http://webcache.googleusercontent.com 8
http://xianguo.com 7
http://feeds2.feedburner.com 6
http://feeds.feedburner.com 6
http://www.linkedin.com 4
http://yandex.ru 3
http://clayliao.blogspot.co.uk 3
http://clayliao.blogspot.com.au 2
http://clayliao.blogspot.fr 2
http://clayliao.blogspot.sg 2
http://clayliao.blogspot.de 1
http://clayliao.blogspot.fi 1
http://nodeslide.herokuapp.com 1
http://clayliao.blogspot.co.nz 1
http://www.clayliao.blogspot.de 1
http://www.bing.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • P.44 左側jquery對應函數為
    $('#msg').load('/ajax/test.html #foo');
    Are you sure you want to
    Your message goes here
    Processing…
  • YUI
    Are you sure you want to
    Your message goes here
    Processing…
  • cool
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Handbook - From jQuery to YUI 3 Handbook - From jQuery to YUI 3 Presentation Transcript

    • Handbook -From jQuery to YUI clayliao@ April, 2012
    • About  Ying-Hsiang, Liao  @clayliao  Y! Search F2E  blog 2
    • 0. YUI 很 Nice 的,這其中一定有什麼誤會GETTING STARTED 3
    • 動態加載 : 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
    • 金手指 : YUI 3 動態加載 需要時自動判斷並載入相依檔案 節省頻寬並加速 開發者不需要自行維護 5
    • 1. 使用熟悉的 CSS 語法找到目標元素CSS SELECTORS 6
    • 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
    • 金手指 : API 設計概念 Y.one() ( 隱含目標只有一個,回傳值為 Node 物件 Y.all() 隱含目標至少有一個以上,回傳值為 NodeList 物件 8
    • 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
    • jQuery 1.7.2 YUI 3.5$(div:even) Y.all(div).even()$(div:odd) Y.all(div).odd()$(:empty) Y.all(:empty) 10
    • 2. 隨心所欲地操作目標元素DOM HANDLING 11
    • jQuery 1.7.2 YUI 3.5var foo = $ var foo =(div.foo:first); Y.one(div.foo);foo.method(); if (foo) { foo.method(); } 12
    • 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
    • jQuery 1.7.2 YUI 3.5.find(p.foo:first) .one(p.foo).find(p.foo) .all(p.foo) 14
    • jQuery 1.7.2 YUI 3.5$(<div/>) Y.Node.create(<div/>) 15
    • jQuery 1.7.2 YUI 3.5.html(foo) .setContent(foo).text(foo) .set(text, foo).val(foo) .set(value, foo) 16
    • jQuery 1.7.2 YUI 3.5.html() .get(innerHTML).text() .get(text).val() .get(value) 17
    • 金手指 : API 設計概念 jQuery 1.7.2 YUI 3.5無參數表示 get Getter/setter 設計html() .get(text)有參數表示 set .set(text, foo)html(foo) 18
    • jQuery 1.7.2 YUI 3.5.attr(foo) .getAttribute(foo).attr(foo, bar) .setAttribute(foo, bar) 19
    • jQuery 1.7.2 YUI 3.5.siblings() .siblings().siblings(selector) .siblings(selector) .siblings(fn) 20
    • jQuery 1.7.2 YUI 3.5.next() .next().next(selector) .next(selector) .next(fn) 21
    • jQuery 1.7.2 YUI 3.5.prev() .previous().prev(selector) .previous(selector) .previous(fn) 22
    • 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
    • jQuery 1.7.2 YUI 3.5parent.append(<div/>) parent.append(<div/>)child.appendTo(parent) child.appendTo(parent) 24
    • jQuery 1.7.2 YUI 3.5.show() .show().hide() .hide() 25
    • 3. 找到目標元素後,改變長相CSS 26
    • 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
    • Replace nodes CSS class foo with bar jQuery 1.7.2 YUI 3.5 .removeClass(foo). .replaceClass(foo, addClass(bar) bar) 28
    • 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
    • Get the current value for a CSS property jQuery 1.7.2 YUI 3.5 .css(display) .getStyle(display) 30
    • Height / width. Excludes padding andborders jQuery 1.7.2 YUI 3.5 .height() .getComputedStyle(height) .width() .getComputedStyle(width) 31
    • Height / width. Includes padding but notborder jQuery 1.7.2 YUI 3.5 .innerHeight() .get(clientHeight) .innerWidth() .get(clientWidth) 32
    • Height / width. Includes padding andborder jQuery 1.7.2 YUI 3.5 .outerHeight() .get(offsetHeight) .outerWidth() .get(offsetWidth) 33
    • 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
    • 4. 觸發事件與使用者互動EVENT 35
    • 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
    • 金手指 : API 設計概念 jQuery 1.7.2 YUI 3.5 承襲原生 JavaScript 語法 JS: .onClick(fn) YUI: .on(click, fn) 37
    • jQuery 1.7.2 YUI 3.5$ Y.one("#foo").simulate("c (#foo).trigger(clic lick") k); 38
    • 5. 常用功能之操作陣列與 NodeList 物件ARRAY VS. NODELIST 39
    • jQuery 1.7.2 YUI 3.5$ Y.all(.foo).array_metho (.foo).array_method d(args) (args) 40
    • jQuery 1.7.2 YUI 3.5$(.foo).each( Y.all(.foo).each( function() { function() { this.method(); this.method(); } }); ); 41
    • 6. 好 Ajax ,不用嗎 ?AJAX 42
    • jQuery 1.7.2 YUI 3.5$.ajax({ Y.io(url,{ url: url, data: data, data: data, on: {success: success: successFn successFn}); } }); 43
    • 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
    • jQuery 1.7.2 YUI 3.5$.parseJSON( Y.JSON.parse( {"name":"Y {"name":“jQuery"} UI3"}) ) 45
    • 7. 藍波丸 : 原生 JavaScript 強化 !LANGUAGE UTILITIES 46
    • jQuery 1.7.2 YUI 3.5$.trim(foo); Y.Lang.trim(foo); 47
    • 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
    • jQuery 1.7.2 YUI 3.5$.inArray(value, Y.Array.indexOf(value,array) array) 49
    • 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
    • YUI ~= jQuery + jQuery UIONE MORE THING 52
    • <body class="yui3-skin-sam"> 53
    • <body class="yui3-skin-night"> 54
    • Thank you