Handbook - From jQuery to YUI 3
- 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
- 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
- 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
- 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
- 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
- 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
- 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