jQuery 教學 ( 搭配 EZoApp )

jQuery + EZoAppwww.ezoui.com

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

jQuery + EZoApp

變身！？

先來談談 jQuery

<script src="jquery.min.js"></script>

jQuery 預載的程式

2

jQuery

$3

因為 jQuery 簡化 了網頁元素的操控方式

jQuery 為什麼好用？

4

起手式 抓取 id ：$('#aaa')

抓取 class ：$('.bbb')

抓取 attribute ：$('[data-role="ccc"]')

抓取 DOM ：$('span')

抓 Element

5

http://goo.gl/x8hWiX

範例 1 ： 使用 jQuery 將內容放入指定的

element

$('span').html(內容 ) $('#aaa').html(內容 ) $('.bbb').html(內容 ) $('[data-role="ccc"]').html(內容 )

6

第貳式

find & selectfind ：$('#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

http://goo.gl/S1qgMP

範例 2 ： 使用 jQuery 將內容放入指定的

element

$('span span').html(內容 ) $('#aaa span').html(內容 ) $('.bbb span').html(內容 ) $('[data-role="ccc"] span').html(內容 )

8

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

jQuery 最強 的一式

10

API

11

效果

$(selector).hide();

$(selector).show();

$(selector).fadeIn();

$(selector).fadeOut();

$(selector).slideDown();

$(selector).slideUp();

$(selector).animate();

jQuery effectshttp://api.jquery.com/category/effects/http://www.w3school.com.cn/jquery/jquery_ref_effects.asp

12

事件

jQuery eventshttp://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

內容

$(selector).append();

$(selector).appendTo();

$(selector).prepend();

$(selector).prependTo();

$(selector).html();

$(selector).text();

$(selector).empty();

jquery manipulationhttp://api.jquery.com/category/manipulation/http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp

14

屬性

$(selector).addClass();

$(selector).removeClass();

$(selector).hasClass();

$(selector).toggleClass();

$(selector).css();

$(selector).attr();

$(selector).removeAttr();

jquery manipulationhttp://api.jquery.com/category/manipulation/http://www.w3school.com.cn/jquery/jquery_ref_attributes.asp

15

表單

$(selector).blur();

$(selector).change();

$(selector).focus();

$(selector).submit();

$(selector).val();

jquery formshttp://api.jquery.com/category/forms/http://www.w3school.com.cn/jquery/jquery_ref_events.asp

16

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

直接來看範例吧！

範例 4 ： 利用 jQuery 改變背景顏色

$(selector).css({‘background’:’red’});

http://goo.gl/AjXpNL

17

範例 5 ：點選按鈕，背景變色

http://goo.gl/Nxf7cE

18

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

http://goo.gl/tJuutU

19

範例 7 ：點選按鈕，對應顏色的文字依序消失 $(selector).hide();

http://goo.gl/iLXsBL

20

來一個小練習！

練習點選按鈕，讓對應文字的「背景」變色，其他的背景保持灰色

http://goo.gl/eJgX1C

21

繼續看其他的範例！

範例 8 ：輸入文字，下方同時出現輸入的文字

http://goo.gl/txmJr2

22

範例 9 ：輸入文字，按下按鈕，出現文字

http://goo.gl/LSaBQA

23

範例 10 ：輸入文字，按下按鈕，可以出現也可以清除文字

http://goo.gl/maIxQw

24

範例 11 ：加入滑動桿，改變數值

http://goo.gl/PZym2e

25

範例 12 ：利用滑動桿，改變文字大小

http://goo.gl/4bVDt4

26

練習一下！

練習使用滑動桿，改變矩形的長寬

http://goo.gl/5t1qP4

27

jQuery 的另一大特色

動畫

範例 13 ： 使用 animate 讓方塊移動

http://goo.gl/I6mgtn

28

範例 14 ： 按按鈕之後，使用 animate 讓方塊長度變化

http://goo.gl/I6mgtn

29

練習一下！

練習 讓紅色方塊在 2 秒內，移動到右下角

http://goo.gl/5n5PPy30

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

應用案例 1 ：視圖檢視

http://goo.gl/7e2YvK

31

應用案例 2 ：調色盤

http://goo.gl/DjPh9q33

應用案例 3 ：訂購飲料系統

http://goo.gl/wiJ2BX33

http://goo.gl/4Uw95x

建議解析度： 600 x 1024

34

應用案例 4 ：用程式控制動畫

http://goo.gl/MFStFY

建議解析度： 480 x 800

35

應用案例 5 ：做遊戲

應用案例 6 jQuery 也可以讀取後端資料

http://goo.gl/4w2iAl

測試時瀏覽器須跨域： --args --disable-web-security

36

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

37

除此之外

有了 EZoApp 才更顯得 jQuery 的極致

38

瞧瞧 EZoApp 的威力

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

39

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

40

不用寫程式 直接嵌入 youtube

http://goo.gl/RnbyOs

41

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

42

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

範例 13 ：EZoApp 地圖應用

http://goo.gl/qaIYp8

43

範例 14 ：EZoApp RSS 應用

http://goo.gl/7m42PP

( 蘋果日報 RSS http://www.appledaily.com.tw/rss )

44

範例 15 ：EZoApp 圖表應用

http://goo.gl/3UlgNo

45

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

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

謝謝聆聽敬請指教