Enviar pesquisa
Carregar
Handbook - From jQuery to YUI 3
•
16 gostaram
•
4,780 visualizações
Ying-Hsiang Liao
Seguir
Tecnologia
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 55
Recomendados
Pimp your site with jQuery!
Pimp your site with jQuery!
Elliott Kember
Index1
Index1
grateful7
Jquery p1
Jquery p1
zientuni
jQueryチュートリアル
jQueryチュートリアル
Tomohiro MITSUMUNE
Taller1
Taller1
Řỉgö VẻGầ
Feeds. использование и создание плагинов. Feeds API
Feeds. использование и создание плагинов. Feeds API
Alex S
Java Thread Cronometro
Java Thread Cronometro
jubacalo
Java AWT Calculadora
Java AWT Calculadora
jubacalo
Recomendados
Pimp your site with jQuery!
Pimp your site with jQuery!
Elliott Kember
Index1
Index1
grateful7
Jquery p1
Jquery p1
zientuni
jQueryチュートリアル
jQueryチュートリアル
Tomohiro MITSUMUNE
Taller1
Taller1
Řỉgö VẻGầ
Feeds. использование и создание плагинов. Feeds API
Feeds. использование и создание плагинов. Feeds API
Alex S
Java Thread Cronometro
Java Thread Cronometro
jubacalo
Java AWT Calculadora
Java AWT Calculadora
jubacalo
Best gourmet market
Best gourmet market
chicagonewsyesterday
Index2
Index2
grateful7
Assalamualaykum warahmatullahi wabarakatuu
Assalamualaykum warahmatullahi wabarakatuu
iswan_di
Hace una calculadora en jeank
Hace una calculadora en jeank
HumbertoWuwu
Project Komputer Grafik
Project Komputer Grafik
HamimSuyuti
includ
includ
Zaend Zaend
アプリ設定の保存をシンプルに
アプリ設定の保存をシンプルに
susan335
1- Sourcecode Array
1- Sourcecode Array
Fajar Baskoro
Danna y felix 10°
Danna y felix 10°
danna gabriela
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
irwinvifxcfesre
Aller plus loin avec Doctrine2
Aller plus loin avec Doctrine2
André Tapia
Sis quiz
Sis quiz
Clesio Veloso
Vatesh
Vatesh
vatesh
Makalah game sudoku
Makalah game sudoku
Bagus Prayogo
Check out our photos of the Pixies' Metro show
Check out our photos of the Pixies' Metro show
chicagonewsyesterday
Sbaw091013
Sbaw091013
Atsushi Tadokoro
Silex al límite
Silex al límite
Javier Eguiluz
Як досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворк
Shtrih Sruleg
es6.concurrency()
es6.concurrency()
Ingvar Stepanyan
Когда возможностей Active record недостаточно
Когда возможностей Active record недостаточно
Evgeniy Lukovsky
Gamification for webapps
Gamification for webapps
Ying-Hsiang Liao
淺談 NodeJS 與框架
淺談 NodeJS 與框架
Ying-Hsiang Liao
Mais conteúdo relacionado
Mais procurados
Best gourmet market
Best gourmet market
chicagonewsyesterday
Index2
Index2
grateful7
Assalamualaykum warahmatullahi wabarakatuu
Assalamualaykum warahmatullahi wabarakatuu
iswan_di
Hace una calculadora en jeank
Hace una calculadora en jeank
HumbertoWuwu
Project Komputer Grafik
Project Komputer Grafik
HamimSuyuti
includ
includ
Zaend Zaend
アプリ設定の保存をシンプルに
アプリ設定の保存をシンプルに
susan335
1- Sourcecode Array
1- Sourcecode Array
Fajar Baskoro
Danna y felix 10°
Danna y felix 10°
danna gabriela
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
irwinvifxcfesre
Aller plus loin avec Doctrine2
Aller plus loin avec Doctrine2
André Tapia
Sis quiz
Sis quiz
Clesio Veloso
Vatesh
Vatesh
vatesh
Makalah game sudoku
Makalah game sudoku
Bagus Prayogo
Check out our photos of the Pixies' Metro show
Check out our photos of the Pixies' Metro show
chicagonewsyesterday
Sbaw091013
Sbaw091013
Atsushi Tadokoro
Silex al límite
Silex al límite
Javier Eguiluz
Як досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворк
Shtrih Sruleg
es6.concurrency()
es6.concurrency()
Ingvar Stepanyan
Когда возможностей Active record недостаточно
Когда возможностей Active record недостаточно
Evgeniy Lukovsky
Mais procurados
(20)
Best gourmet market
Best gourmet market
Index2
Index2
Assalamualaykum warahmatullahi wabarakatuu
Assalamualaykum warahmatullahi wabarakatuu
Hace una calculadora en jeank
Hace una calculadora en jeank
Project Komputer Grafik
Project Komputer Grafik
includ
includ
アプリ設定の保存をシンプルに
アプリ設定の保存をシンプルに
1- Sourcecode Array
1- Sourcecode Array
Danna y felix 10°
Danna y felix 10°
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
George McCaskey's handling of the Ray McDonald affair offers a lesson to the ...
Aller plus loin avec Doctrine2
Aller plus loin avec Doctrine2
Sis quiz
Sis quiz
Vatesh
Vatesh
Makalah game sudoku
Makalah game sudoku
Check out our photos of the Pixies' Metro show
Check out our photos of the Pixies' Metro show
Sbaw091013
Sbaw091013
Silex al límite
Silex al límite
Як досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворк
es6.concurrency()
es6.concurrency()
Когда возможностей Active record недостаточно
Когда возможностей Active record недостаточно
Destaque
Gamification for webapps
Gamification for webapps
Ying-Hsiang Liao
淺談 NodeJS 與框架
淺談 NodeJS 與框架
Ying-Hsiang Liao
超理性使用者介面設計 - Data-driven A/B Testing
超理性使用者介面設計 - Data-driven A/B Testing
Ying-Hsiang Liao
【前端測試】打造自動化的持續集成測試系統
【前端測試】打造自動化的持續集成測試系統
Ying-Hsiang Liao
YUI 3 菜鳥救星
YUI 3 菜鳥救星
Ying-Hsiang Liao
第一次 Mobile App 就上手
第一次 Mobile App 就上手
Ying-Hsiang Liao
Chinese Handwriting in Yahoo! F2E Summit 2011
Chinese Handwriting in Yahoo! F2E Summit 2011
Ying-Hsiang Liao
CSS 菜鳥救星
CSS 菜鳥救星
Ying-Hsiang Liao
Yahoo! 釀的酒 - 淺嚐 Cocktails
Yahoo! 釀的酒 - 淺嚐 Cocktails
Ying-Hsiang Liao
用JavaScript 實踐《軟體工程》的那些事兒!
用JavaScript 實踐《軟體工程》的那些事兒!
鍾誠 陳鍾誠
Destaque
(10)
Gamification for webapps
Gamification for webapps
淺談 NodeJS 與框架
淺談 NodeJS 與框架
超理性使用者介面設計 - Data-driven A/B Testing
超理性使用者介面設計 - Data-driven A/B Testing
【前端測試】打造自動化的持續集成測試系統
【前端測試】打造自動化的持續集成測試系統
YUI 3 菜鳥救星
YUI 3 菜鳥救星
第一次 Mobile App 就上手
第一次 Mobile App 就上手
Chinese Handwriting in Yahoo! F2E Summit 2011
Chinese Handwriting in Yahoo! F2E Summit 2011
CSS 菜鳥救星
CSS 菜鳥救星
Yahoo! 釀的酒 - 淺嚐 Cocktails
Yahoo! 釀的酒 - 淺嚐 Cocktails
用JavaScript 實踐《軟體工程》的那些事兒!
用JavaScript 實踐《軟體工程》的那些事兒!
Handbook - From jQuery to YUI 3
1.
Handbook - From jQuery
to YUI clayliao@ April, 2012
2.
About
Ying-Hsiang, Liao @clayliao Y! Search F2E blog 2
3.
0. YUI 很
Nice 的,這其中一定有什麼誤會 GETTING STARTED 3
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.
金手指 : YUI
3 動態加載 需要時自動判斷並載入相依檔案 節省頻寬並加速 開發者不需要自行維護 5
6.
1. 使用熟悉的 CSS
語法找到目標元素 CSS SELECTORS 6
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.
金手指 : API
設計概念 Y.one() ( 隱含目標只有一個,回傳值為 Node 物件 Y.all() 隱含目標至少有一個以上,回傳值為 NodeList 物件 8
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.
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.
2. 隨心所欲地操作目標元素 DOM HANDLING
11
12.
jQuery 1.7.2
YUI 3.5 var foo = $ var foo = ('div.foo:first'); Y.one('div.foo'); foo.method(); if (foo) { foo.method(); } 12
13.
jQuery 1.7.2
YUI 3.5 var foo = $ var foo = ('div.foo'); Y.all('div.foo'); if (foo.length) { if (foo.size()) { //do something //do something } } 13
14.
jQuery 1.7.2
YUI 3.5 .find('p.foo:first') .one('p.foo') .find('p.foo') .all('p.foo') 14
15.
jQuery 1.7.2
YUI 3.5 $('<div/>') Y.Node.create('<div/>') 15
16.
jQuery 1.7.2
YUI 3.5 .html('foo') .setContent('foo') .text('foo') .set('text', 'foo') .val('foo') .set('value', 'foo') 16
17.
jQuery 1.7.2
YUI 3.5 .html() .get('innerHTML') .text() .get('text') .val() .get('value') 17
18.
金手指 : API
設計概念 jQuery 1.7.2 YUI 3.5 無參數表示 get Getter/setter 設計 html() .get('text') 有參數表示 set .set('text', 'foo') html('foo') 18
19.
jQuery 1.7.2
YUI 3.5 .attr('foo') .getAttribute('foo') .attr('foo', 'bar') .setAttribute('foo', 'bar') 19
20.
jQuery 1.7.2
YUI 3.5 .siblings() .siblings() .siblings(selector) .siblings(selector) .siblings(fn) 20
21.
jQuery 1.7.2
YUI 3.5 .next() .next() .next(selector) .next(selector) .next(fn) 21
22.
jQuery 1.7.2
YUI 3.5 .prev() .previous() .prev(selector) .previous(selector) .previous(fn) 22
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.
jQuery 1.7.2
YUI 3.5 parent.append('<div/>') parent.append('<div/>') child.appendTo(parent) child.appendTo(parent) 24
25.
jQuery 1.7.2
YUI 3.5 .show() .show() .hide() .hide() 25
26.
3. 找到目標元素後,改變長相 CSS
26
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.
Replace node's CSS
class 'foo' with 'bar' jQuery 1.7.2 YUI 3.5 .removeClass('foo'). .replaceClass('foo', addClass('bar') 'bar') 28
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.
Get the current
value for a CSS property jQuery 1.7.2 YUI 3.5 .css('display') .getStyle('display') 30
31.
Height / width.
Excludes padding and borders jQuery 1.7.2 YUI 3.5 .height() .getComputedStyle('height') .width() .getComputedStyle('width') 31
32.
Height / width.
Includes padding but not border jQuery 1.7.2 YUI 3.5 .innerHeight() .get('clientHeight') .innerWidth() .get('clientWidth') 32
33.
Height / width.
Includes padding and border jQuery 1.7.2 YUI 3.5 .outerHeight() .get('offsetHeight') .outerWidth() .get('offsetWidth') 33
34.
Get/Set x,y coordinates
relative to the document 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.
4. 觸發事件與使用者互動 EVENT
35
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.
金手指 : API
設計概念 jQuery 1.7.2 YUI 3.5 承襲原生 JavaScript 語法 JS: .onClick(fn) YUI: .on('click', fn) 37
38.
jQuery 1.7.2
YUI 3.5 $ Y.one("#foo").simulate("c ('#foo').trigger('clic lick") k'); 38
39.
5. 常用功能之操作陣列與 NodeList
物件 ARRAY VS. NODELIST 39
40.
jQuery 1.7.2
YUI 3.5 $ Y.all('.foo').array_metho ('.foo').array_method d(args) (args) 40
41.
jQuery 1.7.2
YUI 3.5 $('.foo').each( Y.all('.foo').each( function() { function() { this.method(); this.method(); } } ); ); 41
42.
6. 好 Ajax
,不用嗎 ? AJAX 42
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.
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.
jQuery 1.7.2
YUI 3.5 $.parseJSON( Y.JSON.parse( '{"name":"Y '{"name":“jQuery"} UI3"} ) ) 45
46.
7. 藍波丸 :
原生 JavaScript 強化 ! LANGUAGE UTILITIES 46
47.
jQuery 1.7.2
YUI 3.5 $.trim('foo'); Y.Lang.trim('foo'); 47
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.
jQuery 1.7.2
YUI 3.5 $.inArray(value, Y.Array.indexOf(value, array) array) 49
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
52.
YUI ~= jQuery
+ jQuery UI ONE MORE THING 52
53.
<body class="yui3-skin-sam">
53
54.
<body class="yui3-skin-night">
54
55.
Thank you