介紹 jQuery 基本語法和結構，搭配 EZoApp 做出元件控制、互動表單、動畫與串接後段的實做，深入淺出的了解 jQuery

1. jQuery + EZoApp
www.ezoui.com

2. 要來介紹一些更有趣的玩意了！

3. jQuery + EZoApp

4. 變身！？

5. 先來談談 jQuery

6. <script src="jquery.min.js"></script>
jQuery 預載的程式
2

7. jQuery
3

8. 因為 jQuery 簡化 了網頁元素的操控方式
jQuery 為什麼好用？
4

9. 起 手
式
抓取 id ：
$('#aaa')
抓取 class ：
$('.bbb')
抓取 attribute ：
$('[data-role="ccc"]')
抓取 DOM ：
$('span')
抓 Element
5

10. http://goo.gl/x8hWiX
範例 1 ：
使用 jQuery 將內容放入指定的 element
$('span').html(內容)
$('#aaa').html(內容)
$('.bbb').html(內容)
$('[data-role="ccc"]').html(內容)
6

11. 貳
find & select
find ：
$('#aaa').find('span')
$('.bbb').find('span')
$('[data-role="ccc"]').find('span')
select ：
$('#aaa span')
$('.bbb span')
$('[data-role="ccc"] span')
族繁不及備載
http://api.jquery.com/category/selectors/
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
7

12. http://goo.gl/S1qgMP
範例 2 ：
使用 jQuery 將內容放入指定的 element
$('span span').html(內容)
$('#aaa span').html(內容)
$('.bbb span').html(內容)
$('[data-role="ccc"] span').html(內容)
8

13. http://goo.gl/OIASOZ
範例 3 ：
select + find
$('span span').find('div').html(內容)
$('#aaa span').find('div').html(內容)
$('.bbb span').find('div').html(內容)
$('[data-role="ccc"] span').find('div').html(內容)
9

14. jQuery 最 強的一式
10

15. API
11

16. 效
果
$(selector).hide();
$(selector).show();
$(selector).fadeIn();
$(selector).fadeOut();
$(selector).slideDown();
$(selector).slideUp();
$(selector).animate();
jQuery effects
http://api.jquery.com/category/effects/
http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
12

17. 事
件
jQuery events
http://api.jquery.com/category/events/
http://www.w3school.com.cn/jquery/jquery_ref_events.asp
$(selector).on();
$(selector).one();
$(selector).off();
$(selector).hover();
$(selector).resize();
$(selector).toggle();
$(selector).scroll();
13

18. 內
容
$(selector).append();
$(selector).appendTo();
$(selector).prepend();
$(selector).prependTo();
$(selector).html();
$(selector).text();
$(selector).empty();
jquery manipulation
http://api.jquery.com/category/manipulation/
http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp
14

19. 屬
性
$(selector).addClass();
$(selector).removeClass();
$(selector).hasClass();
$(selector).toggleClass();
$(selector).css();
$(selector).attr();
$(selector).removeAttr();
jquery manipulation
http://api.jquery.com/category/manipulation/
http://www.w3school.com.cn/jquery/jquery_ref_attributes.asp
15

20. 表
單
$(selector).blur();
$(selector).change();
$(selector).focus();
$(selector).submit();
$(selector).val();
jquery forms
http://api.jquery.com/category/forms/
http://www.w3school.com.cn/jquery/jquery_ref_events.asp
16

21. 相信你應該已經嚇到頭暈了

22. 直接來看範例吧！

23. 範例 4 ：
利用 jQuery 改變背景顏色
$(selector).css({‘background’:’red’});
http://goo.gl/AjXpNL
17

24. 範例 5 ：
點選按鈕，背景變色
http://goo.gl/Nxf7cE
18

25. 範例 6 ：
點選按鈕，帶出按鈕文字，同時改變文字顏色
$(selector).css({‘color’:’red’});
http://goo.gl/tJuutU
19

26. 範例 7 ：
點選按鈕，對應顏色的文字依序消失
$(selector).hide();
http://goo.gl/iLXsBL
20

27. 來一個小練習！

28. 練習
點選按鈕，讓對應文字的「背景」變色，其他的背景保持灰色
http://goo.gl/eJgX1C
21

29. 繼續看其他的範例！

30. 範例 8 ：
輸入文字，下方同時出現輸入的文字
http://goo.gl/txmJr2
22

31. 範例 9 ：
輸入文字，按下按鈕，出現文字
http://goo.gl/LSaBQA
23

32. 範例 10 ：
輸入文字，按下按鈕，可以出現也可以清除文字
http://goo.gl/maIxQw
24

33. 範例 11 ：
加入滑動桿，改變數值
http://goo.gl/PZym2e
25

34. 範例 12 ：
利用滑動桿，改變文字大小
http://goo.gl/4bVDt4
26

35. 練習一下！

36. 練習
使用滑動桿，改變矩形的長寬
http://goo.gl/5t1qP4
27

37. jQuery 的另一大特色
動畫

38. 範例 13 ：
使用 animate 讓方塊移動
http://goo.gl/I6mgtn
28

39. 範例 14 ：
按按鈕之後，使用 animate 讓方塊長度變化
http://goo.gl/I6mgtn
29

40. 練習一下！

41. 練習
讓紅色方塊在 2 秒內，移動到右下角
http://goo.gl/5n5PPy
30

42. 看了那麼多範例，是不是該看點相關應用？

43. 應用案例 1 ：
視圖檢視
http://goo.gl/7e2YvK
31

44. 應用案例 2 ：
調色盤
http://goo.gl/DjPh9q
33

45. 應用案例 3 ：
訂購飲料系統
http://goo.gl/wiJ2BX
33

46. http://goo.gl/4Uw95x
建議解析度：600 x 1024
34
應用案例 4 ：
用程式控制動畫

47. http://goo.gl/MFStFY
建議解析度：480 x 800
35
應用案例 5 ：
做遊戲

48. 應用案例 6
jQuery 也可以讀取後端資料
http://goo.gl/4w2iAl
測試時瀏覽器須跨域：--args --disable-web-security
36

49. jQuery 更擁有數以萬計的 plugin 支援
http://plugins.jquery.com/
37

50. 除此之外
有了 EZoApp
才更顯得 jQuery 的極致
38

51. 瞧瞧 EZoApp 的威力

52. 不用寫程式
直接產生圖表
http://goo.gl/oE1Sdg
39

53. 不用寫程式
直接產生天氣資訊表
http://goo.gl/pGYlb3
40

54. 不用寫程式
直接嵌入 youtube
http://goo.gl/RnbyOs
41

55. 不用寫程式
直接產生相機應用
http://goo.gl/Hor5as
42

56. 高手五步之內，可以取人性命
EZoApp 五行程式之內，可以做出應用

57. 範例 13 ：
EZoApp 地圖應用
http://goo.gl/qaIYp8
43

58. 範例 14 ：
EZoApp RSS 應用
http://goo.gl/7m42PP
( 蘋果日報 RSS http://www.appledaily.com.tw/rss )
44

59. 範例 15 ：
EZoApp 圖表應用
http://goo.gl/3UlgNo
45

60. 以上就是 jQuery + EZoApp 的基本介紹

61. 更多精彩的應用，等待你我去發掘

62. 謝謝聆聽
敬請指教